前端开发中Ajax实例_常用方法

web前端ajax开发面试题|前端开发:ajax html css js|网站前端开发

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
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>前端开发者mac系统</title>
<linkrel=”stylesheet” href=””>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<divclass=”box”></div>
</body>
<script>
functiongetlpcase(){
$.ajax({
url: “../loupan_ajax.php”,
type: ‘GET’,
data: {
action: ‘getLoupan’,
ip: ”
},
datatype: ‘json’,
success:function(data){
var_data=JSON.parse(data);
console.log(_data);
varhtml_txt=”;
for (varoin_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:数据类型
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>web前端开发ajson实例</title>
<linkrel=”stylesheet” href=””>
<script src=”jquery-1.11.0.min.js”></script>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<divclass=”box”></div>
</body>
<script>
functiongetlpcase(){
$.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:返回后要做的动作
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>js 前端模板开发</title>
<linkrel=”stylesheet” href=””>
<script src=”jquery-1.11.0.min.js”></script>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<divclass=”con”></div>
</body>
<script>
$(‘.con’).load(‘dome.html .box’,function(response,status,xhr){
console.log(status)
})
</script>
</html>

5.serialize()
序列化表单元素,返回name1=value1&name2=value2….
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>前端开发js</title>
<linkrel=”stylesheet” href=””>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
</head>
<body>
<divclass=”box”>
<formaction=””>
<inputtype=”text” id=’a’ name=’a’ />
<inputtype=”text” id=’b’ name=’b’ />
<selectid=”c” name=’c’>
<optionvalue=”1″>1</option>
<optionvalue=”2″>2</option>
</select>
<inputtype=”radio” id=’d’ name=’d’ value=”8″ />
<inputtype=”button” />
</form>
</div>
</body>
<script>
$(‘input[type=button]’).click(function(){
document.write($(‘form’).serialize())
})
</script>
</html>

6.serializeArray()
将表单序列化为json数组
html 代码

<!DOCTYPE html>
<html>
<head>
<metacharset=”utf-8″>
<metahttp-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>前端开发要学jsp吗</title>
<linkrel=”stylesheet” href=””>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
</head>
<body>
<divclass=”box”>
<formaction=””>
<inputtype=”text” id=’a’ name=’a’ />
<inputtype=”text” id=’b’ name=’b’ />
<selectid=”c” name=’c’>
<optionvalue=”1″>1</option>
<optionvalue=”2″>2</option>
</select>
<inputtype=”radio” id=’d’ name=’d’ value=”8″ />
</form>
<inputtype=”button” />
</div>
</body>
<script>
$(‘input[type=button]’).click(function(){
document.write(JSON.stringify(($(‘form’).serializeArray())))
})
</script>
</html>

将表单直接序列化为json格式的插件
html 代码

(function($) {
$.fn.serializeJson=function(){
varserializeObj={};
vararray=this.serializeArray();
varstr=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;
}
});
returnserializeObj;
};
})(jQuery);

JSON.parse(str)将json字符串转成json对象
JSON.stringify(str)将json对象转为json字符

7.$.when().done()
同时发送ajax请求,不会等第一个返回后再发送第二个,当两个请求都成功后执行done
html 代码

<script>
$.when($.ajax(‘page1.php’),$.ajax(‘page2.php’)).done(function(data1,data2){
document.write(data1) //第一个请求返回的数据
document.write(data2) //第二个请求返回的数据
})
</script>
前端开发要学jsp吗?|web前端开发 js库|web q前端开发json
» 本文来自:前端开发者 » 《前端开发中Ajax实例_常用方法》
» 本文链接地址:https://www.rokub.com/3678.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!