常用属性集合
$.ajax({ url:url, data:{}, type:"get", success:function(){}, timeout:2000, error:function(){}, beforeSend:function(){}, dataType:"jsonp", //跨域必要加 jsonp:"cb", // 是否触发ajax的全局方法 global:true })
分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
正在测试jq-ajax方法<br>
<input type="text" id="user">
<input type="text" id="pass">
<input type="button" id="btn">
</body>
<script src="../jquery.js"></script>
<script>
$("#btn").click(function(){
var url = "http://localhost/1908/jq-ajax/data/data.php"
// 最简化的ajax
$.ajax({
url:url,
success:function(res,type,xhr){
console.log(res)
}
data：{user:$("#user").val(),pass:$("#pass").val() }
})
// 超时的ajax
$.ajax({
url:url,
success:function(res,type,xhr){
console.log(res)
console.log(type)
console.log(xhr)
},
error:function(a,b,c){
console.log(a,b,c)
},
timeout:10
})
// loading的ajax
var img;
$.ajax({
url:url,
success:function(res,type,xhr){
img.remove()
console.log(res)
},
beforeSend:function(){ //在成功收到传过来的数据之前
img = $("<img src='1.gif'>");
$("body").append(img);
}
})
// 跨域的ajax，同时具有loading
var jsonpUrl = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"; //百度接口
var img;
$.ajax({
url:jsonpUrl,
data:{
wd:$("#user").val()
},
success:function(res,type,xhr){
img.remove() //成功返回数据时就消失
console.log(res)
},
dataType:"jsonp",
jsonp:"cb",
beforeSend:function(){
img = $("<img src='1.gif'>");
$("body").append(img);
}
})
// 触发或不触发全局方法的ajax
$(document).ajaxSuccess(function(){
alert("ajax成功了")
})
$(document).ajaxSend(function(){
alert("ajax执行了发送")
})
$(document).ajaxStart(function(){
alert("ajax开启了")
})
$.ajax({
url:url,
success:function(res,type,xhr){
console.log(res)
},
global:true表示触发 false表示不触发
})
// 自动解析json数据
var jsonUrl = "http://localhost/1908/jq-ajax/data/json.php"
$.ajax({
url:jsonUrl,
success:function(res,type,xhr){
console.log(res)
},
dataType:"json" //自动将json中的数据以数组的形式输出来。
})
})
</script>
</html>
若是一个ajax所执行成功的操作与json的位置...许多公共属性都一样。可以设置一个公共类，输出不同的数据就可以了
$.ajaxSetup({ //公共代码 url:"http://localhost/1908/jq-ajax/data/data.php", success:function(res,type,xhr){ console.log(res) } }) $.ajax({ data:{ user:"admin", pass:"123" } }) $.ajax({ data:{ user:"admin", pass:"123456" } })