有了ajax请求的公共方法,就省去了每次有ajax请求时都要写一遍ajax语法的完整方法了,只需要传递参数即可
**
封装的ajax.js:
**
//test
//var token = 'd697c140c9e5d34af49238aee6f245dd';
var baseURL = "./"; // 必填: api地址
//ajax公共方法
function getAjax( url , type , datajosn , dataType , success , fail ){
//datajosn.token = datajosn.token ? datajosn.token : token;
$.ajax({
url: baseURL + url,
type: type,
data: datajosn,
//dataType: "json",
//dataType: "text",
dataType: dataType,
beforeSend:function(){
},
success: function (response) {
if(dataType == 'text'){
response = eval('(' + response + ')');
}
//console.log(response);
if (response.code === -1) {
// 登录状态失效, 重新授权
return false;
}else if (response.code === -2) {
//身份不符合,相应操作等
return false;
} else if (response.code === 0) {
alert('友情提醒:\n response.code === 0 时的提示信息:\n' + response.msg);
fail && fail(response.msg);
return false;
}
success && success(response);
},
error: function (error) { // 请求失败处理
console.log(error);
//fail && fail(error);
alert('本次请求失败');
}
});
}
//使用
//getAjax(
// 'url' ,
// 'get 或 post' ,
// dataJson ,
// 'json 或 text',
// function(res){
// //成功
// } ,
// function(res){
// //失败
// console.log(res);
// }
//);
**
ajax_test.html:
**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX公共方法demo</title>
<style>
table{ text-align:center; background-color:#ddd; border-spacing:1px;}
th , td{ padding:5px; background-color:#fff;}
span{ display:inline-block; padding:10px 20px; border-radius:10px; border:#ddd solid 1px; cursor:pointer;}
.span_in{ color:#fff; background-color:#03F;}
</style>
</head>
<body>
<div id="changeMenu" style="width:1100px; margin:20px auto; text-align: center;">
<div>
<span data-type="1" data-datatype="json">dataType: "json" =》 显示 - 1</span><!-- class="span_in"-->
<span data-type="2" data-datatype="json">dataType: "json" =》 显示 - 2</span>
<span data-type="3" data-datatype="json">dataType: "json" =》 显示 - 3</span>
<span data-type="4" data-datatype="json">dataType: "json" =》 显示 - 4</span>
</div>
<hr style="margin: 15px 0;">
<div>
<span data-type="1" data-datatype="text">dataType: "text" =》 显示 - 1</span><!-- class="span_in"-->
<span data-type="2" data-datatype="text">dataType: "text" =》 显示 - 2</span>
<span data-type="3" data-datatype="text">dataType: "text" =》 显示 - 3</span>
<span data-type="4" data-datatype="text">dataType: "text" =》 显示 - 4</span>
</div>
</div>
<hr style="margin: 15px 0;">
<div style="width:1000px; margin:20px auto;">
<table id="show" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="33.333%">姓名</th>
<th width="33.333%">性别</th>
<th width="33.333%">出生日期</th>
</tr>
</thead>
<tbody>
<!--<tr>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>-->
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="ajax.js"></script>
<script type="text/javascript">
var canChangeData = true;
$('#changeMenu span').on('click',function(){
var $this = $(this);
var type = $(this).data('type');
var dataType = $(this).data('datatype');
if(!$this.hasClass('span_in')){
if(canChangeData){
canChangeData = false;
}else{
return;
}
$('#changeMenu span').removeClass('span_in');
$this.addClass('span_in');
$('#show tbody').html('<tr><td colspan="4" style="color:#d00;font-weight:blod;">数据加载中...</td></tr>');
var dataJson = {
type : type,
dataType : dataType,
};
console.log(dataJson);
getAjax(
dataType == 'text' ? 'ajax_test_text.php' : 'ajax_test_json.php' ,
'post' ,
dataJson ,
dataType , // json 或 text
function(res){
console.log(res);
setTimeout(function(){
if(!res.list.length){
$('#show tbody').html('<tr><td colspan="4">暂无数据</td></tr>');
}else{
$('#show tbody').html('');
for(var i in res.list){
$('#show tbody').append('<tr>\
<td>' + res.list[i].name + '</td>\
<td>' + res.list[i].sex + '</td>\
<td>' + res.list[i].birth + '</td>\
</tr>');
}
}
canChangeData = true;
},200);
} ,
function(res){
//失败
console.log(res);
canChangeData = true;
}
);
}
});
$('#changeMenu span').first().trigger('click');
</script>
</body>
</html>
**
ajax_test_json.php:
**
<?php
$type = $_POST['type'];
//dataType: "json"
if($type == 1 || $type == 2){
$resultsData = array(
'code' => 1,
'list' => array(
0 => array(
'id' => 1,
'name' => $type . ' dataType: "json" 姓名1',
'sex' => '男',
'birth' => '19990120',
),1 => array(
'id' => 2,
'name' => $type . ' dataType: "json" 姓名2',
'sex' => '女',
'birth' => '19880320'
),2 => array(
'id' => 3,
'name' => $type . ' dataType: "json" 姓名2',
'sex' => '男',
'birth' => '20000520'
),3 => array(
'id' => 4,
'name' => $type . ' dataType: "json" 姓名4',
'sex' => '女',
'birth' => '20120820'
),4 => array(
'id' => 5,
'name' => $type . ' dataType: "json" 姓名5',
'sex' => '男',
'birth' => '19001220'
)
)
);
}else if($type == 3){
$resultsData = array(
'code' => 0,
'msg' => '后台返回的错误提示内容',
'list' => array()
);
}else if($type == 4){
$resultsData = array(
'code' => 1,
'msg' => '',
'list' => array()
);
}
echo json_encode($resultsData);
?>
**
ajax_test_text.php
**
<?php
$type = $_POST['type'];
//dataType: "text" => JS处理:data = eval('(' + data + ')');
if($type == 1 || $type == 2){
echo "{
'code':1,
'list':[
{
'id':1,
'name':'" . $type . " dataType: \"text\" 姓名1',
'sex':'男',
'birth':'19990120',
},
{
'id':2,
'name':'" . $type . " dataType: \"text\" 姓名2',
'sex':'女',
'birth':'19880320',
},
{
'id':3,
'name':'" . $type . " dataType: \"text\" 姓名2',
'sex':'男',
'birth':'20000520',
},
{
'id':4,
'name':'" . $type . " dataType: \"text\" 姓名4',
'sex':'女',
'birth':'20120820',
},
{
'id':5,
'name':'" . $type . " dataType: \"text\" 姓名5',
'sex':'男',
'birth':'19001220',
},
]
}";
}else if($type == 3){
echo "{
'code':0,
'msg':'后台返回的错误提示内容',
'list':[]
}";
}else if($type == 4){
echo "{
'code':1,
'msg':'',
'list':[]
}";
}
?>