众所周知JQuery中的Ajax主要用于数据传输，其数据传输格式为JSON格式数据，比XML格式数据传输更快。

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

ajax方法的参数说明:

  1. url 请求地址
  2. type 请求方式，默认是’GET’，常用的还有’POST’
  3. dataType 设置返回的数据格式，常用的是’json’格式
  4. data 设置发送给服务器的数据，没有参数不需要设置
  5. success 设置请求成功后的回调函数
  6. error 设置请求失败后的回调函数
  7. async 设置是否异步，默认值是’true’，表示异步，一般不用写
  8. 同步和异步说明

    • 同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
    • 异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。

代码实现：

 1 script>
 2     $.ajax({
 3     // 1.url 请求地址
 4     url:'http://t.weather.sojson.com/api/weather/city/101010100',
 5     // 2.type 请求方式，默认是'GET'，常用的还有'POST'
 6     type:'GET',
 7     // 3.dataType 设置返回的数据格式，常用的是'json'格式
 8     dataType:'JSON',
 9     // 4.data 设置发送给服务器的数据, 没有参数不需要设置
10 ​
11     // 5.success 设置请求成功后的回调函数
12     success:function (response) {
13         console.log(response);    
14     },
15     // 6.error 设置请求失败后的回调函数
16     error:function () {
17         alert("请求失败,请稍后再试!");
18     },
19     // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
20     async:true
21 });
22 </script>

Ajax使用GET简化方式，请求JSON数据

get请求格式：get(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式)
代码实现如下：

<script>
        $(function(){
            // Ajax使用GET简化方式，请求JSON数据
            // get请求格式：get(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式)
            $.get('studnet.json',{},function(response){
                // 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>

Ajax使用POST简化方式，请求JSON数据

POST请求格式：post(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式)

代码实现如下：

 1  <script>
 2         $(function(){
 3             // Ajax使用POST简化方式，请求JSON数据
 4             // POST请求格式：post(url,传递给服务器的参数,请求成功后执行的函数,能够解析的数据格式)
 5             $.post('studnet.json',{},function(response){
 6                 // response是解析后的数据,
 7                 // 如果JSON解析之前的数据是数组，那么response就是数组
 8                 // 如果JSON解析之前的数据是对象，那么response就是对象
 9                 var $name = $('#name');
10                 var $age = $('#age');
11                 var $sex = $('#sex');
12                 var $school = $('#school');
13                 $name.html(response.name);
14                 $age.html(response.age);
15                 $sex.html(response.sex);
16                 $school.html(response.school);
17             },'JSON').error(function(){
18                 alert('Error!');
19             });
20         });
21     </script>

 

 

 

 
 

版权声明：本文为chao666原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/chao666/p/12026385.html