Jquery ajax书写方法代码实例解析
Ajax在前端的应用极其广泛，因此，我们有必要对其进行总结，以方便后期的使用。
AJAX优点：
可以异步请求服务器的数据，实现页面数据的实时动态加载，在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
jquery在全局对象jquery（也就是$）绑定了ajax()函数，可以处理Ajax请求，ajax常用的配置选项有：
- async是否异步执行，默认为True,千万不要指定为False
- method发送的Method,缺省为“GET”,可指定为‘POST','PUT','DELETE',单词字母必须大写
- contentType发送POST请求的格式，默认值为'application/x-www-form-urlencoded;charset=UTF-8'，也可以指定为‘text/plain''application/json'
- data发送给后端的数据，可以是字符串、数组或对象。如果是GET请求，data将被转换成query附加到url上；如果是POST请求，根据contentType把data序列化成合适的格式
- dataType接收的数据格式，可以指定为'html''xml''json''text'等，缺省情况下根据响应的Content-Type猜测
- headers发送的额外的HTTP请求头，必须是一个Object
语法一：$.ajax({name:value,name:value,...})
#登录js代码
$(".form-login").submit(function(e){
e.preventDefault();
mobile=$("#mobile").val();
pwd=$("#password").val();
vardata={
mobile:mobile,
pwd:pwd
};
$.ajax({
url:"/api/***",
type:"POST",
data:JSON.stringify(data),
contentType:"application/json",
dataType:"json",
headers:{"X-CSRFToken":getCookie('csrf_token')},
success:function(resp){
if(resp.error==0){
//resp是后端通过json.dumps()返回的json格式数据:res={"error":0,"errmsg":"登录失败"}
//resp=json.dumps(res)
//请求成功，跳转页面
location.href='/'
}
else{
alert(resp.errmsg)
}
}
})
})
语法二：$.get(URL,params,function(resp,status_code){})
URL必需参数；
params可选参数，params={key:value...},会以?key=value&key=value...的方式自动添加到URL后面
function(resp,status_code)可选参数，是请求成功后所执行的函数，resp是后台返回的数据；states_code是自动生成的响应状态码，可缺省
#更新首页房源展示信息
varparams={
aid:0,
sd:"2018-2-20",
ed:"2019-2-29",
page:1
};
$.get("/api/v1_0/houses",params,function(resp){
if(resp.error==0){
$(".house-list").html(template("house-list-tmpl",{houses:resp.data.houses}));
}
else{
$(".house-list").append(template("house-list-tmpl",{houses:resp.data.houses}));
}
})
语法三：$.post(URL,data,function(resp,states_code){})
URL必选参数；
data可选参数连同请求发送的数据；
function(resp,status_code)可选参数，是请求成功后所执行的函数，resp是后台返回的数据；states_code是自动生成的响应状态码，可缺省
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"mjy",
url:"https://cnblogs.com/We612/"
},
function(data,status){
alert("数据:\n"+data+"\n状态:"+status);
});
});
说明：
$.GET基本上用于从服务器获得（取回）数据。注释：GET方法可能返回缓存数据。
$.POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。
实际应用中多用到语法一语法二，语法三较少
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。