Ajax常用方法
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.$.post()
常用的参数：
url:请求的地址
data:发送的数据
success:回调函数
dataType:数据类型
3.$.get()
常用的参数：
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>
<input type="radio" id='d' name='d' value="8" />
</select>
<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字符
本文作者： Jasmine
本文链接： https://www.jianbaizhan.com/article/462
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！