> 编程开发 > AJAX相关 >

深入理解ajax系列第九篇：jQuery中的ajax 2017-03-29 13:37　出处：清屏网　人气：　

前面的话

jQuery提供了一些日常开发中需要的快捷操作，例如load、ajax、get和post等，使用jQuery开发ajax将变得极其简单。这样开发人员就可以将程序开发集中在业务和用户体验上，而不需要理会那么繁琐的XMLHTTPRequest对象。jQuery对ajax操作进行了封装，在jQuery中 $.ajax() 属性最底层的方法，第2层是load()、 $.get() 和 $.post() 方法，第3层是 $.getScript() 和 $.getJSON() 方法。下面将详细介绍jQuery中的ajax

load()

load()方法是jQuery中最简单和常用的ajax方法，使用load()方法通过ajax请求加载服务器中的数据，并把返回的数据放置到指定的元素中

【调用格式】

load()方法的调用格式为如下所示，参数url为加载服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数

load(url,[data],[callback])

【载入HTML文档】

$('#result').load('ajax/test.html');

[注意]如果选择器没有匹配的元素，如document不包含id="result"的元素，这个Ajax请求将不会被发送出去

=> h6{margin:4px;} p{margin: 0;} ====> $(function(){ $('#send').click(function(){ $('#resText').load('ajaxjQueryLoad.html') }) }) ======"para">地板.</p> </div>

【部分载入】

如果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) { }); <style> h6{margin:4px;} p{margin: 0;} #test{border:1px solid black;} =====> $(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参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后，执行的回调函数

$.getJSON(url,[data],[callback])

getJSON()方法相当于以下ajax()方法的缩写

$.ajax({ dataType: "json", url: url, data: data, success: success });

【回调函数】

回调函数中的第一个参数表示返回的数据

$.getJSON('test.json',function(data){ //data :返回的数据 })

一般地，使用each()方法，来构建DOM结构

==> $('#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>