新建一个公共js文件,如下:request.js
//第一步:定义一个公共的请求页面地址
var host = "http://192.168.1.2:8080/"
//第二步:自定义公共的请求方法
function ajaxMethod(str, obj, successCallback) {
var link = urlLink(str);
$.support.cors = true;
$.ajaxSetup({
cache: false,
});
$.ajax({
type: link.method,
url: host + link.url,
data: obj,
dataType: 'json',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
async: true,
cache: false,
time: new Date().getTime(),
success: function (data) {
successCallback(data)
}
});
};
//第三步:定义所有页面的请求地址和请求方法
function urlLink(str) {
var url = {
content: {
method: 'get',
url: '/link/api/content'
},
banner: {
method: 'get',
url: '/link/api/banner'
}
};
return url[str];
};
新建另一个js,命名data.js,用来使用自定义各个页面的请求方法完成页面渲染
$(document).ready(function () {
// 接口一
ajaxMethod('content', {}, function (res) {
if(res.success){
//接口请求成功的处理
var result = res.result;
$.each(result, function (index, item) {
//循环渲染页面即可
var str = "<li class='contentLi'>"+item.title+"</li>"
$("#newsList").append(str)
});
}else{
//接口请求失败的处理
}
});
// 接口二
ajaxMethod('banner', {}, function (res) {
if(res.success){
//接口请求成功的处理
var result = res.result;
$.each(result, function (index, item) {
//循环渲染页面即可
});
}else{
//接口请求失败的处理
}
});
});
在页面index.html引入jquery.js以及上述两个js文件(多个页面使用的话可以在多个页面引入这几个文件使用),如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8;" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery请求方法封装</title>
<script src="js/jquery1.12.2.js"></script>
<script type="text/javascript" src="js/request.js"></script>
<script type="text/javascript" src="js/data.js"></script>
</head>
<body>
<div>
<ul id="newsList"></ul>
</div>
</body>
</html>
综上所述,就封装好了jQuery的请求方法啦~~~~~~~~