您的位置：首页 > 其它

Ajax常用方法

2016-07-06 14:32 288 查看

<!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>
</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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航