~ Ajax（jQuery）的相关 API
load()
load 方法的作用是从服务器中加载数据，是一个简单但强大的 Ajax 方法。
// 调用格式 load(url,[data],[callback]) // 其中，参数url为加载服务器地址， // 可选项data参数为请求时发送的数据， // callback参数为数据请求成功后，执行的回调函数
[1] Ajax 如何加载别的页面？
$('#result').load('ajax/test.html'); // 如果选择器没有匹配的元素，如document不包含id="result"的元素，这个Ajax请求将不会被发送出去<!-- 当前页面--> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <style> h6{margin:4px;} p{margin: 0;} </style> <body> <input type="button" id="send" value="ajax获取"> <div class="comment">已有评论:</div> <div id="resText"></div> <script> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html') }) }) </script> <!-- 要载入的页面 --> <div class="comment"> <h6>张三：</h6> <p class="para">沙发.</p> </div> <div class="comment"> <h6>李四：</h6> <p class="para">板凳.</p> </div> <div class="comment"> <h6>王五：</h6> <p class="para">地板.</p> </div>
[2] 如何加载页面的一部分呢？ — 如果url参数的字符串中包含一个或多个空格，那么第一个空格后面的内容，会被当成是jQuery的选择器，从而决定应该加载返回结果中的哪部分内容。
$('#result').load('ajax/test.html #container');当这种方法执行, 它将检索ajax/test.html返回的页面内容，jQuery会获取ID为container元素的内容，并且插入到ID为result元素，而其他未被检索到的元素将被废弃。
$(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html .para') }) })
[ 传递方式 ] load()方法默认使用GET方式，如果data参数提供一个对象，那么使用POST方式。
//无参数传递，则是GET方式 $('#resText').load('tset.php') //有参数传递，则是POST方式 $('#resText').load('tset.php',{name:'rain',age:'22'})
[ 回调函数 ] 如果提供了"complete"回调函数，它将在函数处理完之后，并且HTML已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次，并且this始终指向当前正在处理的DOM元素。
回调函数有3个参数，分别代表请求返回的内容、请求状态和XMLHTTPRequest对象。
$('#result').load('ajax/test.html',function(responseText,textStatus,XMLHTTPRequest) { //responseText :请求返回的内容 //testStatus: success、error、notmodified、timeout四种 //XMLHTTPRequest: XMLHTTPRequest对象 });<style> h6{margin:4px;} p{margin: 0;} #test{border:1px solid black;} </style> <input type="button" id="send" value="ajax获取"> <div class="comment">已有评论:</div> <div id="resText"></div> <div id="test"></div> <script> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html .para',function(a,b,c){ $('#test').html('responseText:' + a + '<br>textStatus:' + b + '<br>XMLHTTPRequest:' + c); }) }) }) </script>
getJSON()
getJSON()方法使用一个HTTP GET请求从服务器加载JSON编码的数据。
// 调用格式 $.getJSON(url,[data],[callback]) getJSON()方法相当于以下ajax()方法的缩写： $.ajax({ dataType: "json", url: url, data: data, success: success });[ 回调函数 ] 回调函数中的第一个参数表示返回的数据
$.getJSON('test.json',function(data){ //data :返回的数据 })
一般地，使用each()方法，来构建DOM结构
<input id="btnShow" type="button" value="加载" />
<div id="result"></div>
<script>
$('#btnShow').click(function(){
var $this = $(this);
var $html = '';
$.getJSON('sport.json',function(data){
$this.attr('disabled','true');
$.each(data,function(index,sport){
$html += '<div>' + sport["name"] + '</div>';
});
$('#result').html($html);
})
})
</script>
// json文件
[{
"name": "足球"
},{
"name": "散步"
},{
"name": "篮球"
},{
"name": "乒乓球"
},{
"name": "骑自行车"
}]
getScript()
getScript()方法使用一个HTTP GET请求从服务器加载并执行一个javascript文件
// 调用格式 $.getScript(url,[callback]) 相当于一个Ajax函数的缩写： $.ajax({ url: url, dataType: "script", success: success });
<input id="btnShow" type="button" value="加载" />
<div id="result"></div>
<script>
$('#btnShow').click(function(){
var $this = $(this);
$.getScript('sport.js',function(){
$this.attr('disabled','true');
$('#result').html($html);
})
})
</script>
var data = [{
"name": "足球"
}, {
"name": "散步"
}, {
"name": "篮球"
}, {
"name": "乒乓球"
}, {
"name": "骑自行车"
}];
var $html = '';
$.each(data, function (index, sport) {
$html += "<div>" + sport["name"] + "</div>";
});
get()
get()方法使用一个HTTP GET请求从服务器加载数据。
[ 调用格式 ] get()方法的调用格式如下所示，url表示一个包含发送请求的URL字符串；data表示发送给服务器的字符串或Key/value键值对；success(data, textStatus, jqXHR)表示当请求成功后执行的回调函数；dataType表示从服务器返回的预期的数据类型。默认：智能猜测(xml, json, script, 或 html)。
jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
相当于一个ajax功能的缩写
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
[ 使用参数 ] 通过get()方法发送给服务器的key/value数据会作为查询字符串最终附加到URL中
<form action="#" id="form1">
<p>评论:</p>
<p>姓名：<input type="text" name="username" id="username"></p>
<p>内容：<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
<p><input type="button" id="send" value="提交"></p>
</form>
<div class="comment">已有评论：
<div id="resText"></div>
</div>
<script>
$('#send').click(function(){
$.get('jqGet.php',{
username:$('#username').val(),
content:$('#content').val()
},function(data){
//
})
})
</script>
[ 回调函数 ]
function(data,textStatus){
//data: 返回的内容，可能是XML、JSON、HTML、JS
//textStatus: success、error、notmodified、timeout四种
}
[ 数据格式 ]
1、HTML片段
function(data,textStatus){
$('#resText').html(data);
}
2、XML文档
function(data,textStatus){
var username = $(data).find('comment').attr('username');
var content = $(data).find('comment content').text();
var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
$('#resText').html(txtHtml);
}
3、JSON
function(data,textStatus){
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'><h6>" + username + ":</h6><p class='para'>" + content + "</p></div>";
$('#resText').html(txtHtml);
}
<!-- 前端页面 -->
<select id="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
$.get('jqRequest.php',{
num: $('#num').val()
},function(data){
$('#result').html('您选择的数字' + $('#num').val() + '是' + data)
})
})
</script>
<!-- 后端页面 -->
<?php
$num = $_REQUEST['num'];
if($num % 2 == 0){
echo '偶数';
}else{
echo '奇数';
}
?>
post()
post()方法使用一个HTTP POST 请求从服务器加载数据
jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
相当于一个 Ajax 函数的简写形式
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
<!-- 前端页面 -->
<select id="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="send">测试</button>
<div id="result"></div>
<script>
$('#send').click(function(){
$.post('jqRequest.php',{
num: $('#num').val()
},function(data){
$('#result').html('您选择的数字' + $('#num').val() + '是' + data)
})
})
</script>
<!-- 后端页面 -->
<?php
$num = $_REQUEST['num'];
if($num % 2 == 0){
echo '偶数';
}else{
echo '奇数';
}
?>
post()和get()的结构和使用方式都相同。但要注意的是，当load()方法带有数据参数传递时，会使用POST方式发送请求。
序列化
当一个表单中字段较多，表单元素较复杂时，就需要一种方法来简化提取表单内部控件的值的操作，这一行为通常叫序列化，jQuery提供了param()、serialize()和serialzeArray()这三个方法。
[ param() ] param(obj)方法用来创建一个数组或对象序列化的字符串，适用于一个URL地址查询字符串或Ajax请求。
console.log($.param({ width:1680, height:1050 }));//'width=1680&height=1050'
[ serialize() ] serialize()方法将用作提交的表单元素的值编译成字符串
// serialize()方法的一个额外好处是会自动对键值对儿中的特殊字符进行编码
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br />
<select name="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<br/>
<input type="checkbox" name="check" value="check1" id="ch1"/>
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
<label for="ch2">check2</label>
<br />
<input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2"/>
<label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
<script>
function showValues() {
$("#results").text($("form").serialize());
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
</script>
[ serializeArray() ] serializeArray()方法将用作提交的表单元素的值编译成拥有name和value对象组成的数组，即json格式的数据。例如[ { name: a value: 1 }, { name: b value: 2 },...]。
<form>
<div><input type="text" name="a" value="1" id="a" /></div>
<div><input type="text" name="b" value="2" id="b" /></div>
<div><input type="hidden" name="c" value="3" id="c" /></div>
<div>
<textarea name="d" rows="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>
<script>
$('form').submit(function() {
console.log($(this).serializeArray());
return false;
});
</script>
// 结果为：
[
{
name: "a",
value: "1"
},
{
name: "b",
value: "2"
},
{
name: "c",
value: "3"
},
{
name: "d",
value: "4"
},
{
name: "e",
value: "5"
}
]
该对象可以使用each()函数对数据进行迭代输出
$dataArr = $('form').serializeArray();
$html = '';
$.each($dataArr,function(i,data){
$html += data.name + ':' + data.value + ';';
})
console.log($html);//a:1;b:2;c:3;d:4;e:5;
全局事件
jQuery简化ajax操作不仅体现在调用ajax方法和处理响应方面，而且还体现在对调用ajax方法的过程中的HTTP请求的控制。通过jQuery提供的一些自定义全局函数，能够为各种与ajax相关的事件注册回调函数。例如，当ajax请求开始时，会触发ajaxStart()方法的回调函数；当ajax请求结束时，会触发ajaxStop()的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有ajax请求发生，就会触发它们。
[ ajaxSetup() ] ajaxSetup()方法为以后要用到的Ajax请求设置默认的值，设置完成后，后面的Ajax请求将不需要再添加这些选项值，它的调用格式为：
$.ajaxSetup([options])例如，设置 AJAX 请求默认地址为 "/xmlhttp/"，用 POST 代替默认 GET 。其后的 AJAX 请求不再设置任何选项参数
$.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ data: myData });如果想让某个ajax请求不受ajaxSetup()方法的影响，可以在使用ajax()方法时，将参数中的global设置为false
$.ajaxSetup({ url: "/xmlhttp/", type: "POST" }); $.ajax({ global:false, url:"test", type:'GET' })
[ ajaxStart()和ajaxStop() ] ajaxStart()和ajaxStop()方法是绑定Ajax事件。ajaxStart()方法用于在Ajax请求发出前触发函数，ajaxStop()方法用于在Ajax请求完成后触发函数。它们的调用格式为：
$(selector).ajaxStart(function()) $(selector).ajaxStop(function())[注意]从 jQuery 1.8 开始, ajaxStart()和ajaxStop()方法只能绑定到 document元素
例如，读取远程网站的图片速度可能会比较慢，如果在加载的过程中，不给用户提供一些提示和反馈信息，很容易让用户误认为按钮单击无用，使用户对网站失去信心。这时，ajaxStart()和ajaxStop()方法就派上用场了。
<!-- 前端页面 --> <select id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <button id="send">测试</button> <div id="result"></div> <script> $(document).ajaxStart(function(){ $('#test').show() }).ajaxStop(function(){ $('#test').hide(); }); $('#send').click(function(){ $.ajax({ url:'jqRequest.php', type:'POST', data:{ num:$('#num').val() }, success:function(data){ $('#result').html('您选择的数字' + $('#num').val() + '是' + data); } }) }) </script> <!-- 后端页面 --> <?php $num = $_REQUEST['num']; if($num % 2 == 0){ echo '偶数'; }else{ echo '奇数'; } ?>