liu--qi-

Jquery封装Ajax主要适用于两种,一种是非跨域,一种是跨域,先来说一下非跨域的基本封装:

非跨域的封装分为两种,一种是需要区分请求方法,一种综合请求方法,即getpost请求方法都可以使用。需要区分的有两个方法,即:$.get()$.post()方法。使用代码来演示下:

$.get()方法

$.get({

       // url 地址的PHP文件发起请求

       url : \'./get.php\',

       // 请求时携带参数,参数以对象形式定义

       data : {name:\'张三\' , pwd:123456},

                // 设定  dataType : \'json\', 会自动解析响应体json

                dataType : \'json\',

                // 请求成功时,执行的函数

                // 函数的参数,存储响应体

                success : function(res){

                    console.log(res)

                }

            })

 

$.get()方法中的基本参数表示

  url :发送请求的地址

  Data:发送到服务器的数据,以对象形式存储

  dataType :期望的数据类型,如果写成jsonp类型,会自动解析响应体字符串jsonp

  Success: 成功时执行的函数

 

 

$.post()方法

$.post({

                url : \'./post.php\',

                // 请求时携带参数,参数以对象形式定义

                data : {name:\'张三\' , pwd:123456},

                dataType : \'json\',

                // 请求成功时,执行的函数

                success : function(res){

                    console.log(res)

                }

            })

$.post()方法中的基本参数表示

  url :发送请求的地址

  Data:发送到服务器的数据,以对象形式存储

  dataType :期望的数据类型,如果写成jsonp类型,会自动解析响应体字符串jsonp

  Success: 成功时执行的函数

 

综合请求方式:$.ajax()

 

$(\'button\').click(function(){

            $.ajax({

                url : \'./get.php\',

                // 请求方式,不写就是,默认值get.

                type: \'get\',

                // data传参参数

                data : {name:\'张三\',pwd:123456},

                // dataType, 设定 json 解析响应体的json

                dataType : \'json\',

                success : function(res){

                    console.log(res);

                    console.log(this);

                },

                 async : false,  // 设定异步

                // 请求成功不执行,请求失败才执行

                error : function(res){

                    console.log(res)

                },

                 timeout : 1,   // 超时报错,但是必须是异步执行

                cache : false,    // 如果是不缓存,会在数据后有一个 _数值 的时间戳

                                  // 告诉程序,这个结果的获取时间

                context : obj ,   // this默认指向 ajax对象 , 可以设定this的指向

            })

 

$.ajax()方法中的基本参数表示

常用:

  url :发送请求的地址

  Type:请求方式,不写就是,默认值get.

  Data:发送到服务器的数据,以对象形式存储

  dataType :期望的数据类型,如果写成jsonp类型,会自动解析响应体字符串jsonp

  Success: 成功时执行的函数

不常用:

  async : 设定是否异步true是异步

       error : 请求失败执行函数

       timeout :设定时间,单位是毫秒,超时报错,但是必须是异步执行

       cache : 设定是否缓存请求结果,如果是不缓存,会在数据后有一个 _数值 的时间戳, 告诉程序,这个结果的获取时间

        context :设定this的指向

 

跨域

如果需要跨域,有两种方式,一种是代理方式,一种jsonp方式

  1. 代理方式:低版本jquery不支持,如果要使用的话,要注意jquery的版本问题

(1)设置代理服务器,修改配置文件;

(2)在原来的请求地址中替换代理地址

  1. Jsonp方式:在不跨域前提下设定几个内容

(1) 设定dataType : \'jsonp\',      jsonp 跨域请求专门的参数

(2) 设定函数名称jsonp : \'fun\',       此时定义函数名称为 fun , 如果不写默认名称是 callback

 

 

 

分类:

技术点:

相关文章: