ajax

ajax-Jquery ***
Jquery对ajax操作进行了封装 , 简化了ajax开发的流程 .实现了多浏览器的兼容.
ajax函数 ***
函数名称: $.ajax
参数列表: 长度为1 , 需要传递一个对象.

通常传递到参数1的对象, 我们使用JSON格式传输, 属性与值描述如下:
{
url:“请求的地址”,
type:“请求方式GET/POST…”,
async:“默认true,表示异步请求”,
data:“请求的参数,格式与网址?后的格式一致”,
dataType:“TEXT/JSON”,//表示服务器返回的数据类型.如果编写JSON , 我们接收到的数据 就是一个对象
success:function(data){
//当服务器请求成功时, 这里执行
//参数data就是响应的内容.
// 当dataType的值为TEXT时, data是一个string类型的数据
// 当dataType的值为JSON时, data是一个对象.
},
error:function(){
//当服务器返回的状态码不再200-299的范围 , 则表示失败, 这里执行
}
}
get函数与post函数 ****
两个函数的格式, 完全一致, 一个用于GET请求, 一个用于POST请求.

函数名称: $.get $.post
参数列表:
列表长度为4:
参数1. url : 请求地址
参数2. data: 请求时携带的参数 , 与网址?后的参数格式一致.
参数3. success: 当请求成功时 , 处理的函数
参数4. 响应的数据类型: TEXT/JSON

格式示例:
$.get(“s1.do”,"",function(data){

},"JSON");

getJSON函数 ***
函数名称: $.getJSON
参数列表:
参数列表长度为3
参数1. url : 请求地址
参数2. data: 请求时携带的参数, 与网页?后的参数格式一致
参数3. success: 当请求成功时, 处理的函数.

案例:

快递查询2

查询

</ul>

load函数 熟悉
与其他的ajax函数不同, 它是使用jquery对象调用的.
作用是 , 将一个网址的响应体, 加载到调用方法的元素内部.

函数名称: $obj.load
参数列表:
参数列表长度为3
参数1. url : 请求地址
参数2. [data]: 传递的参数
参数3. [success]: 请求成功时的处理函数.

案例:

JD商品

<div>
    <button onclick="x1(-1)">上一页</button>
    <span id="count">1</span>
    <button onclick="x1(1)">下一页</button>
</div>
<div id="content">
    <div class="item">
        商品1 ，图片请自行脑补
    </div>


</div>

ajax-Vue * 除了需要引入vue.js文件以外, 还需要引入: vue-resource.js 基于全局的 Ajax GET请求格式: Vue.http.get("请求地址",[传递的参数]).then(success,error);

POST请求格式:
Vue.http.post(“请求地址”,[传递的参数],{“emulateJSON”:true}).then(success,error);
在Vue实例中使用的ajax
GET请求格式:
this.$http.get(“请求地址”,[传递的参数]).then(success,error);

POST请求格式:
this.$http.post(“请求地址”,[传递的参数],{“emulateJSON”:true}).then(success,error);
GET请求参数传递的格式
{params:{键1:值1,键2:值2…键n:值n}}
POST请求参数传递的格式
{键1:值1,键2:值2…键n:值n}
success函数 与 error函数 :
这两个函数都存在一个参数: response , 指的是响应对象.

响应对象的属性:
1. url : 请求的网址
2. body: 服务器返回的响应体, 如果是JSON格式, 则body为对象, 如果不是JSON格式 ,则body为string
3. ok : boolean值, 如果响应码为200-299之间 值为true , 表示成功.
4. status: 服务器响应的状态码 ,例如: 200 , 404 ,500 …
5. statusText: 响应状态码对应的文字, 例如status==200时, 则statusText=ok.

响应对象的函数:
1. text() : 以字符串形式, 返回响应体.
2. json() : 以对象形式, 返回响应体.
3. blob() : 以二进制Blob对象形式, 返回相应内容
Vue ajax 案例1 . 全局GET

天气查询

查询

Vue ajax 案例2 . 全局POST

天气查询

查询

Vue ajax 案例3 . Vue实例中GET

天气查询

Vue ajax 案例4 . Vue实例中POST

天气查询