ajax请求的过程:
1.创建XML对象
2.打开服务器链接open
3.发送请求send
4.接受服务器响应
1.$.ajax();
常用的参数:
asycn:设置同步或异步,默认值为true即异步
complete(XHR,TS):无论请求是否成功都调用
contentType:设置编码类型
data:发送的数据,将自动转为字符串
datatype:返回数据的类型,XML| html | json | script | text | jsonp |
success:请求成功的回调函数
URL:请求的地址
type:请求的类型, get/post
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.red{color:red;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
function getlpcase(){
$.ajax({
url:"../loupan_ajax.php",
type:'GET',
data: {action:'getLoupan',ip:''},
datatype:'json',
success:function(data){
var _data = JSON.parse(data);
console.log(_data);
var html_txt = '';
for(var o in _data.lp_data){
if(_data.lp_data[o].loupan_doors>500){
html_txt +='<a href="http://sjq.homekoo.com/thread-'+_data.lp_data[o].thread_id+'-1-1.html" target="_blank" class="red">'+_data.lp_data[o].loupan_name+'</a><br>';
}else{
html_txt +='<a href="http://sjq.homekoo.com/thread-'+_data.lp_data[o].thread_id+'-1-1.html" target="_blank">'+_data.lp_data[o].loupan_name+'</a><br>';
}
$('.box').html(html_txt);
}
}
})
}
getlpcase();
</script>
</html>
2.
常用的参数:
url:请求的地址
data:发送的数据
success:回调函数
dataType:数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="jquery-1.11.0.min.js"></script>
<style>
.red{color:red;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
function getlpcase(){
$.get("../ajax.php",{action:'moveLp'},"html",function(data){
$('.box').html(data)
}
)
}
getlpcase();
</script>
</html>
get和post的区别:get数据大小限制在1kb,而且get会把数据追加到URL中,get会被浏览器缓存起来别人可以在浏览记录中读取到数据,因此不安全。post反之。
4.$(sel).load();
请求文档内容并插入到里面
URL:请求的地址
data:数据
function:返回后要做的动作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="jquery-1.11.0.min.js"></script>
<style>
.red{color:red;}
</style>
</head>
<body>
<div class="con"></div>
</body>
<script>
$('.con').load('dome.html .box',function(response,status,xhr){
console.log(status)
})
</script>
</html>
5.serialize()
序列化表单元素,返回name1=value1&name2=value2….
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<form action="">
<input type="text" id='a' name='a'/>
<input type="text" id='b' name='b'/>
<select id="c" name='c'>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="radio" id='d' name='d' value="8" />
<input type="button"/>
</form>
</div>
</body>
<script>
$('input[type=button]').click(function(){
document.write($('form').serialize())
})
</script>
</html>
6.serializeArray()
将表单序列化为json数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<form action="">
<input type="text" id='a' name='a'/>
<input type="text" id='b' name='b'/>
<select id="c" name='c'>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="radio" id='d' name='d' value="8" />
</form>
<input type="button"/>
</div>
</body>
<script>
$('input[type=button]').click(function(){
document.write(JSON.stringify(($('form').serializeArray())))
})
</script>
</html>
将表单直接序列化为json格式的插件
(function($){
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } });
return serializeObj;
};
})(jQuery);
JSON.parse(str)将json字符串转成json对象
JSON.stringify(str)将json对象转为json字符
7.$.when().done()
同时发送ajax请求,不会等第一个返回后再发送第二个,当两个请求都成功后执行done
<script>
$.when($.ajax('page1.php'),$.ajax('page2.php')).done(function(data1,data2){
document.write(data1)//第一个请求返回的数据
document.write(data2)//第二个请求返回的数据
})
</script>
原创地址:http://www.w3cfuns.com/notes/18316/637bcf6e4f950d109c683e0876c307fa.html