对jquery中的$.ajax二次封装 从而多次调用 今天一整天都在想这个事情
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了对jquery中的$.ajax二次封装 从而多次调用 今天一整天都在想这个事情相关的知识，希望对你有一定的参考价值。
当然了 我封装的是$.ajax 可以传参数 多次调用请求接口 为啥我们这地方不注重前端呢 我都不知道为啥去坚持 不说了 上代码
js文件
$ajax.js
$(function(){
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据，数组存储，如：{"username": "张三", "password": 123456}
* succCallback 成功回调函数
* errorCallback 失败回调函数
* type 请求方式("POST" 或 "GET")， 默认已经设置为 "POST"
* dataType 预期服务器返回的数据类型，常用的如：xml、html、json、text
* reference jquery-1.7.1.js
*/
//插入loading
var html = "";
html += ‘<div class="js_loading">‘;
html += ‘<div class="mask"></div>‘;
html += ‘<div class="loading">‘;
html += ‘<span><img src="loading.gif"></span>‘;
html += ‘</div>‘;
html += ‘</div>‘;
$("body").append(html);
function $ajax(url, postData, succCallback, errorCallback, type, dataType){
var type = type || "post";
var dataType = dataType || "json";
$.ajax({
type: type,
url: url,
data: postData,
dataType: dataType,
beforeSend: function(){ //开始loading
$(".js_loading").show();
},
success: function(res){
if(res.success){
if(succCallback){
succCallback(res);
}
}else{
if(errorCallback){
errorCallback(res);
}
}
},
complete: function(){ //结束loading
//$(".js_loading").remove();
$(".js_loading").hide();
}
});
}
});是不是一看就明白了 so easy 不要觉得那些面试官出的题目有多难 只是么有反应过来
好了 接下来就是调用了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ajax再封装</title>
<style>
.js_loading{display:none;}
.mask{background:rgba(255, 255, 255, 0);position:fixed;left:0;top:0;width:100%;height:100%;z-index:1;}
.loading{position:fixed;left:0;top:0;width:100%;height:100%;z-index:2;display:box;box-pack:center;box-align:center;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
.loading span{display:block;background:#333;width:40px;height:40px;border-radius:3px;text-align:center;}
.loading img{width:26px;margin-top:7px;}
</style>
<script src="jquery-1.7.1.js"></script>
</head>
<body>
<button type="button" class="btn">获取</button>
<div class="box"></div>
<script>
$(function(){
$(".btn").click(function(){
var postData = {
username: ‘张三‘,
password: 123456
};
$ajax(
‘test.asp‘,
postData,
function(res){ //成功
$(".box").html(res.firstName);
},
function(res){ //失败
$(".box").html(res.fail);
}
);
});
});
</script>
</body>
</html>还有就是请求的页面 test.asp
{
"success":true,
"firstName":"获取成功！！！",
"lastName":"哈哈...",
"fail":"获取失败！！！"
}自己试试吧 思路一疏通 写这类的方法不是问题
关机睡觉
---恢复内容结束---
当然
以上是关于对jquery中的$.ajax二次封装 从而多次调用 今天一整天都在想这个事情的主要内容，如果未能解决你的问题，请参考以下文章