jQuery 封装 ajax 的使用方法

标签：text   代理服务   有一个   数据类型   代理   名称   post   期望   失败   

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

非跨域的封装分为两种，一种是需要区分请求方法，一种综合请求方法，即get和post请求方法都可以使用。需要区分的有两个方法，即：$.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

jQuery 封装 ajax 的使用方法

标签：text   代理服务   有一个   数据类型   代理   名称   post   期望   失败   

原文地址：https://www.cnblogs.com/htmllym/p/12832001.html