JQuery之Ajax
众所周知JQuery中的Ajax主要用于数据传输,其数据传输格式为JSON格式数据,比XML格式数据传输更快。
ajax 是 Asynchronous JavaScript and XML的简写,ajax一个前后台配合的技术,它可以让 javascript 发送异步的 http 请求,与后台通信进行数据的获取,ajax 最大的优点是实现局部刷新,ajax可以发送http请求,当获取到后台数据的时候更新页面显示数据实现局部刷新,在这里大家只需要记住,当前端页面想和后台服务器进行数据交互就可以使用ajax了。
ajax方法的参数说明:
url 请求地址
type 请求方式,默认是‘GET‘,常用的还有‘POST‘
dataType 设置返回的数据格式,常用的是‘json‘格式
data 设置发送给服务器的数据,没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步,默认值是‘true‘,表示异步,一般不用写
同步和异步说明
同步是一个ajax请求完成另外一个才可以请求,需要等待上一个ajax请求完成,好比线程同步。
异步是多个ajax同时请求,不需要等待其它ajax请求完成, 好比线程异步。
使用GET方式进行数据传输:
1 <script src=""></script> 2 <script> 3 function show(){ 4 // Ajax使用GET简化方式,请求JSON数据 5 // get请求格式:get(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式) 6 $.get(‘student.json‘,{},function(response){ 7 // 当请求成功JSON解析出来的数据有两个,一个是对象/数组,还有一个所示请求状态码 8 // response是解析后的数据, 9 // 如果JSON解析之前的数据是数组,那么response就是数组 10 // 如果JSON解析之前的数据是对象,,那么response就是对象 11 var $name = $(‘#name‘); 12 var $age = $(‘#age‘); 13 var $sex = $(‘#sex‘); 14 var $school = $(‘#school‘); 15 $name.html(response.name); 16 $age.html(response.age); 17 $sex.html(response.sex); 18 $school.html(response.school); 19 },‘JSON‘).error(function(){ 20 alert(‘Error!‘); 21 }); 22 } 23 </script>
使用POST方式进行数据传输:
<script src=""></script> <script> function show(){ // Ajax使用GET简化方式,请求JSON数据 // get请求格式:get(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式) $.get(‘student.json‘,{},function(response){ // 当请求成功JSON解析出来的数据有两个,一个是对象/数组,还有一个所示请求状态码 // response是解析后的数据, // 如果JSON解析之前的数据是数组,那么response就是数组 // 如果JSON解析之前的数据是对象,那么response就是对象 var $name = $(‘#name‘); var $age = $(‘#age‘); var $sex = $(‘#sex‘); var $school = $(‘#school‘); $name.html(response.name); $age.html(response.age); $sex.html(response.sex); $school.html(response.school); },‘JSON‘).error(function(){ alert(‘Error!‘); }); } </script>
温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/40753.html