初学Ajax(二)
$.get()和$.post()
.load()方法是局部方法，因为它需要一个包含元素的jQuery对象作为前缀。而$.get()和$.post()是全局方法，无须指定某个元素。对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适。
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式：包括xml、html、script、json、jsonp和text。第一个参数为必选参数，后面三个为可选参数。
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
get方式接受的PHP：
<?php
if($_GET['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
jQuery代码如下：
①通过直接在url问号后紧跟着传参
$("input").click(function() {
$.get("test.php?url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
②通过第二个参数data，字符串形式的键值对传参，然后自动转换为问号后紧跟着传参
$("input").click(function() {
$.get("test.php","url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
③通过第二个参数data，对象形式的键值对传参，然后自动转换为问号后紧跟着传参
$("input").click(function() {
$.get("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
});
});
post方式接受的PHP：
<?php
if($_POST['url'] == 'ycku') {
echo "瓢城Web俱乐部";
} else {
echo "木有！";
}
?>
jQuery代码：
①post提交不能使用问号传参
$("input").click(function() {
$.post("test.php?url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
②post提交可以使用字符串形式的键值对传参，自动转换为http消息实体传参
$("input").click(function() {
$.post("test.php","url=ycku", function(response, status, xhr) {
$("#box").html(response);
});
});
③post提交可以使用对象键值对
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
});
});
使用$.post()异步返回html类型：
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
}, "html"); //php文件返回的是纯文本，默认是html或text
});
注意：第四参数type是指定异步返回的类型。一般情况下type参数是智能判断，并不需要我们主动设置，如果主动设置，则会强行按照指定类型格式返回。
$("input").click(function() {
$.post("test.php",{url:"ycku"}, function(response, status, xhr) {
$("#box").html(response);
},"xml"); //本身是纯文本，如果强行按照xml或者json数据格式返回的话，那么就无法获取数据了
});
服务器有test.xml文件：
<?xml version="1.0"?>
<root>
<url>www.ycku.com</url>
</root>
jQuery代码：
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//$("#box").html(response); //报错
alert(response); //[object XMLDocument]
},"xml");
});
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//$("#box").html(response);
alert(response);
},"html"); //默认type已经是xml，如果默认已经是xml，强行设置为html，则会连xml标签也返回
});
使用$.post()异步返回xml：
$("input").click(function() {
$.post("test.xml", function(response, status, xhr) {
//alert($(response).find("root").find("url").text());
$("#box").html($(response).find("root").find("url").text());
}); //type自动转为xml
});
注意：如果载入的是xml文件，type会智能判断，如果强行设置html类型返回，则会把xml文件当成普通数据全部返回，而不会按照xml格式解析数据。
服务器有test.json文件：
[
{
"url" : "www.ycku.com"
}
]
使用$.post()异步返回json：
$("input").click(function() {
$.post("test.json", function(response, status, xhr) {
alert(response[0].url);
}, "json");
});
$.post()方法的使用和$.get()基本上一致，他们之间的区别也比较隐晦，基本都是背后的不同，在用户使用上体现不出。具体区别如下：
- GET请求是通过URL提交的，而POST请求则是HTTP消息实体提交的
- GET提交有大小限制（2KB），而POST方式不受限制
- GET方式会被缓存下来，可能有安全性问题，而POST没有这个问题
- GET方式通过$_GET[]获取，POST方式通过$_POST[]获取(仅针对php而言)
$.getScript()和$.getJSON()
jQuery提供了一组用于特定异步加载的方法：$.getScript()，用于加载特定的JS文件；$.getJSON()，用于专门加载JSON文件。
有时我们希望能够在特定的情况再加载JS文件，而不是一开始把所有JS文件都加载了，这时就要使用$.getScript()方法。
Ajax.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<!-- <script type="text/javascript" src="test.js"></script> -->
</head>
<body>
<input type="button" value="异步加载数据" />
<div id="box"> </div>
</body>
</html>
test.js：
alert("我在被呼唤的情况下才被加载");
jQuery代码：
点击按钮后再加载JS文件：
$("input").click(function() {
$.getScript("test.js");
});
$.getJSON()方法是专门用于加载JSON文件的，使用方法和之前的类似。
test.json：
[
{
"url" : "www.ycku.com"
}
]
jQuery代码：
$("input").click(function() {
$.getJSON("test.json", function(response, status, xhr) {
alert(response[0].url);
});
});
$("input").click(function() {
$.getJSON("test.json", function(response, status, xhr) {
alert(response); //[object Object]
},"html");
});
初学Ajax(二)的更多相关文章
- node.js 初学（二）—— 搭建注册/登录服务器
node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...
- Python爬虫初学（二）—— 爬百度贴吧
Python爬虫初学(二)-- 爬百度贴吧 昨天初步接触了爬虫,实现了爬取网络段子并逐条阅读等功能,详见Python爬虫初学(一). 今天准备对百度贴吧下手了,嘿嘿.依然是跟着这个博客学习的,这次仿照 ...
- ajax二次封装之异步加载
ajax二次封装之异步加载 ajax异步加载会导致在数据未加载回来就读取数据,然后出现数据为空的报错.在ajax封装时,将ajax直接改为同步,虽然可以解决报错,但是会导致页面渲染被阻塞,接口反应时间 ...
- 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现
一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...
- 谈谈Ajax(二)
昨天还没有谈完,今天做一个了解. 首先还是以错误,来讲述. 一.AJax常见错误 Ajax常见的错误,除了昨天列举的之外.还有就是如下状态码: 405,请求类型错误,比如请求是POST,你却用GET, ...
- 初学Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和 ...
- AJAX二
二.简单的dom操作 2.使用js的dom获取页面数据 由于ajax不使用form 而form具有自动收集数据的功能. 不使用form,就需要使用dom手写代码收集数据 ①获得承载数据的元素对象 &l ...
- 初学Ajax(三)
$.ajax() $.ajax()是所有ajax方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装.这个方法只有一个参数,传递一个各个功能键值对的对象. $.ajax()方法对象参数表 ...
- 初学Ajax(一)
以下文字根据李炎恢——jQuery教程整理而成. Ajax全称为:“Asynchronous JavaScript and XML”(异步JavaScript和XML),它并不是JavaScript的 ...
随机推荐
- Go时间戳和日期字符串的相互转换
Go语言中,获取时间戳用time.Now().Unix(),格式化时间用t.Format,解析时间用time.Parse. 看实例代码: package main import ( "fmt ...
- iOS学习之界面通信
一.属性传值 在SecondViewController.h里 #import <UIKit/UIKit.h> @interface SecondViewController : UIVi ...
- OC中实例变量可见度、setter、getter方法和自定义初始化方法
在对类和对象有一定了解之后,我们进一步探讨实例变量的可见度等相关知识 实例变量的可见度分为三种情况:public(共有),protected(受保护的,默认),private(私有的),具体的不同和特 ...
- iOS开发之构建Widget
原文出处: 陈凯 在 jianshu 的博客(@chenkaiHome) 欢迎分享原创到伯乐头条 伴随这iOS 8 系统多达4000项API更新而来同样还有Today Extension.而对iO ...
- 前端开发规范之html编码规范
原则1.规范 .保证您的代码规范,趋html5,远xhtml,保证结构表现行为相互分离.2.简洁.保证代码的最简化,避免多余的空格.空行,保持代码的语义化,尽量使用具有语义的元素,避免使用样式属性和行 ...
- ASP.NET&AJAX&JSON - 动态读取数据
因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台A ...
- Oracle 11g 11201_RHEL5.5_RAC_VBOX 详细搭建步骤
1.安装好vbox,创建好虚拟机(红帽5.5),注意:VBOX全局设置VBOX磁盘的位置和备份位置 IP.hostname 规划: hostname ...
- cocos2dx中使用声音引擎需要包含的头文件
1.需要包含的头文件和命名空间 #include "SimpleAudioEngine.h"using namespace CocosDenshion;
- 向Array中添加归并排序
归并排序思路 1) 归并 从两个有序表R[low...mid]和R[mid+1...high],每次从左边依次取出一个数进行比较,将较小者放入tmp数组中,最后将两段中剩下的部分直接复制到tmp中. ...
- hdu 4858 项目管理 图的分块
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4858 我们建造了一个大项目!这个项目有n个节点,用很多边连接起来,并且这个项目是连通的!两个节点间可能 ...