$.get()方法
语法
$.get(url, [data], [callback], [type])
作用:利用Ajax发送Get请求获取服务器上的数据
参数 | 参数类型 | 是否必选 | 参数说明 |
---|---|---|---|
url | string | 是 | 要请求的资源地址URL |
data | object对象 | 否 | 请求资源时,根据接口文档来决定是否需要携带参数 |
callback | function 函数 | 否 | 请求成功回调函数,我们可以通过此函数参数获得服务器响应数据 |
type | string | 否 | 服务器返回数据格式,目前用得最多的是json格式,少量使用xml |
例
$.get(
'http://127.0.0.1:3001/getHeroSkin', // 请求的服务器Api接口
{heroName:'白起'}, // 带参数对象
function(res){ // 回调函数处理服务器响应回来的数据
console.log(res)
}
);
$.post()方法
语法
$.post(url, [data], [callback], [type])
作用
该方法是利用Ajax发送Post请求将数据提交给服务器
参数 | 参数类型 | 是否必选 | 参数说明 |
---|---|---|---|
url | string | 是 | 要请求的资源地址 |
data | object对象 | 否 | 待发送给服务器的数据 |
callback | function函数 | 否 | 请求成功回调函数,我们可以通过此函数参数获得服务器响应数据 |
type | string | 否 | 服务器返回数据格式,目前用得最多的是json格式,少量使用xml |
例
$.post(
'http://127.0.0.1:3001/addHeroSkin', // 请求的服务器Api接口
{ cname:'武则天',skin_name:'海洋之心' }, // 带参数对象
function(res){ // 回调函数处理服务器响应回来的数据
console.log(resData);
}
);
$.ajax()方法
$.ajax()能发GET和POST请求以及相关参数的作用
参数 | 参数类型 | 是否必选 | 参数说明 |
---|---|---|---|
url | string | 是 | 要请求的资源地址 |
data | object对象 | 否 | 待发送给服务器的数据 |
success | function 函数 | 否 | 请求成功回调函数,我们可以通过此函数参数获得服务器响应数据例如:function(resdata){ resdata即为服务器响应的数据 } |
type | string | 否 | 请求方式 (“POST” 或 “GET”), 默认为 “GET” |
dataType | string 字符串 | 否 | 预期服务器返回的数据类型,例如:JSON,XML,JSONP等 |
例,get方式
$.ajax({
url:'http://127.0.0.1:3001/getHeroSkin', // 请求api接口地址
type:'GET', // 表示发送get请求
dataType:'json', // 表示服务器响应回来json格式数据
data:{heroName:'白起'}, // 表示查询英雄名称为“白起”的数据
success:function(resData){console.log(resData);} // 请求成功的数据存放在resData中
})
例,post方式
$.ajax({
url:'http://127.0.0.1:3001/addHeroSkin, // 请求api接口地址
type:'POST', // 表示发送POST请求
dataType:'json', // 表示服务器响应回来json格式数据
data:{cname:'雅典娜',skin_name:'神奇女侠'}, // 表示将此数据提交给url对应的接口地址
success:function(resData){console.log(resData);} // 请求成功的数据存放在resData中
})
三种方法的区别
- $.get()是利用Ajax发送get请求获取服务器数据
- $.post()是利用Ajax发送post请求将数据提交给服务器
- $.ajax()既能发送Get请求,也能发送Post请求,比 $.get()和 $.post()更加灵活,功能更加丰富