JavaScript前端开发案例教程第11章 jQuery 教学PPT.pptVIP

11.6 jQuery操作Ajax 选项名称 说明 url 处理Ajax请求的服务器地址 data 发送Ajax请求时传递的参数，字符串类型 success Ajax请求成功时所触发的回调函数 type 发送的HTTP请求方式，如get、post datatype 期待的返回值类型，如xml、json、script或html数据类型 async 是否异步，true表示异步，false表示同步，默认值为true cache 是否缓存，true表示缓存，false表示不缓存，默认值为true contentType 请求头，默认值为application/x-www-form-urlencoded; charset=UTF-8 complete 当服务器URL接收完Ajax请求传送的数据后触发的回调函数 jsonp 在一个jsonp请求中重写回调函数的名称 11.6 jQuery操作Ajax $.post(index.php, {id: 2, name: JS}, function(msg) { console.log(msg.id + - + ); // 输出结果：2-JS }, json); $.post() 上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。 11.6 jQuery操作Ajax 在jQuery中对Ajax的操作方法中，$.ajax(url,[options])是底层方法。 通过该方法的options参数，可以实现$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。 下面列举$.ajax()方法的3种常用方式。 只发送GET请求 发送GET请求并传递数据，接收返回结果 只配置setting参数，同样实现Ajax操作 11.6 jQuery操作Ajax $.ajax(index.php,{ data: {book: PHP, sales: 2000}, // 要发送的数据 success:function(msg){// 请求成功后执行的函数 alert(msg); } }); $.ajax(index.php); 示例1 示例2 11.6 jQuery操作Ajax $.ajax({ type: GET url: index.php, data: {id: 2, name: JS}, success: function(msg) { console.log(msg); } }); $.ajaxSetup({ type: GET, url: index.php, data:{id: 2, name: JS}, success: function(msg) { alert(msg); } }); $.ajax(); 等价 11.6 jQuery操作Ajax 除此之外，在jQuery中还为操作Ajax额外的提供了一些辅助的函数以及相关的Ajax事件处理方法，方便开发。 分类 方法/函数 说明 辅助函数 $.param(obj) 创建数组或对象的序列化表示 serialize() 通过序列化表单值，创建URL编码文本字符串 serializeArray() 通过序列化表单值，创建对象数组（名称和值） Ajax事件 ajaxComplete(fn) Ajax请求完成时触发的事件执行函数 ajaxError(fn) Ajax请求发生错误时触发的事件执行函数 ajaxSend(fn) Ajax请求发送前触发的事件执行函数 ajaxStart(fn) Ajax请求开始时触发的事件执行函数 ajaxStop(fn) Ajax请求结束时触发的事件执行函数 ajaxSuccess(fn) Ajax请求成功时触发的事件执行函数 11.6 jQuery操作Ajax var data = {id: 2, name: Lucy, skill: [PHP, JS]}; var seri_data = $.param(data); var deseri_data = decodeURIComponent(seri_data); // 输出结果：id=2name=Lucyskill%5B%5D=PHPskill%5B%5D=JS console.log(seri_data); // 输出结果：id=2name=Lucyskill[]=PHPskill[]=JS console.log(deseri_data); 序列化对象 上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Aja