您的位置：首页 > 其它

对ajax的二次封装，返回接收到的数据

2017-07-05 15:14 246 查看

<!DOCTYPE HTML>

<html lang="en-US">

<head>
<meta charset="UTF-8">
<title>对ajax的封装/加载等待动画</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>

<body>
<input value="Text_ajax函数" type="button" id="ds"/>

<div id="showResult"></div>

<script type="text/javascript">

//ajax请求数据

function getpostdata(murl,mdata,method,success){
$.ajax({
type: method,//通常会用到两种：GET,POST。默认是：GET
url: murl,//(默认: 当前页地址) 发送请求的地址
dataType : "json",//预期服务器返回的数据类型。
data: mdata,//发送给服务器端的数据
timeout: 20000,//超时时间设置，单位毫秒
beforeSend:function (XMLHttpRequest){
console.log('发送请求')//发送请求
},
success: function (data) {
console.log('请求成功')//请求成功
success?success(data):function(){};
},
error: function (data) {
console.log(data);
alert("请求失败");
},
complete:function(XMLHttpRequest, textStatus){
console.log('请求完成')//请求完成
}

});

}

$('#ds').click(function(){
//调用
getpostdata("data2.json","","get",function (data) {
console.log(data);
});

})

//调用的函数可有可无

function error(XMLHttpRequest, textStatus, errorThrown){

// 通常情况下textStatus和errorThown只有其中一个有值

$("#showResult").append("<div>请求出错啦！</div>");

}

function beforeSend(XMLHttpRequest){

$("#showResult").append("<div><img src='loading.gif' /><div>");

}

function callback(msg){

console.log(msg);

}

function complete(XMLHttpRequest, textStatus){

$("#showResult").remove();

console.log('请求成功')

}

</script>

</body>

</html>

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

标签： 可添加加载动画 ajax二次封装请求的封装

相关文章推荐

新的分享

章节导航