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方式进行数据传输：

     <script src="../JS/jquery-1.12.4.min.js"></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>

使用POST方式进行数据传输：

    <script src="../JS/jquery-1.12.4.min.js"></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>

巴特西

JQuery之Ajax基础

最新文章

热门文章