jQuery 封装 ajax 的使用方法
Posted htmllym
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 封装 ajax 的使用方法相关的知识，希望对你有一定的参考价值。
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方式
- 代理方式：低版本jquery不支持，如果要使用的话，要注意jquery的版本问题
（1）设置代理服务器，修改配置文件；
（2）在原来的请求地址中替换代理地址
- Jsonp方式：在不跨域前提下设定几个内容
（1） 设定dataType : ‘jsonp‘, jsonp 跨域请求专门的参数
（2） 设定函数名称jsonp : ‘fun‘, 此时定义函数名称为 fun , 如果不写默认名称是 callback
以上是关于jQuery 封装 ajax 的使用方法的主要内容，如果未能解决你的问题，请参考以下文章