AJAX

新简易ajax辅助类

(function(){

var wct = window.wct = window.wct || {};

wct.host = "http://localhost:8090";

wct.api = {
'menu':'/ajax/menu/',
'desk':'/ajax/desk/'
};

wct.AjaxGet = function(api,callback){
$.ajax({
type:"POST",
url:api,
dataType:"json",
success:function(json){
callback && callback(json);
}
});
}

wct.AjaxPost = function(api,datas,callback){
$.ajax({
type:"POST",
url:api,
data: datas,
dataType:"json",
success:function(json){
callback && callback(json);
}
});
}

})();

Ajax基本格式

$.ajax({
type: "POST",
url: "Ajax.aspx",
data: {
openid: openid,
type: "EduShouXinPanDuan"
},
success: function(data) {
var json = JSON.parse(data);
var Status = json.Status;
var Result = json.Result;
var Msg = json.Msg;
if (Status == "成功") {} else if (Status == "失败") {}
}
})

全局AJAX

complete

在

success

或

error

触发后触发在实战中，几乎必须重载

success.所以这里就不书写了

这里加入

layer插件

，可以达到很好美化效果

Ajax_全局设置 = function (){$.ajaxSetup({//公共参数timeout: 10000,type: "POST",//发送请求前触发beforeSend: function (xhr){layer.load(0, { shade: [0.5, '#fff'] });console.log("AJAX请求发送之前beforeSend_xhr:");console.log(xhr);},      //请求失败遇到异常触发error: function (xhr, status, e){　　　　　　

　　　　　　　　　　//error的第一个参数xhr.responseText 可以打印出后台的错误信息。

　　　　　　　　alert(xhr.responseText);　　　　　　　if(status == "error"){alert("请求错误");}if (status == 'timeout'){layer.open({type: 0,content: "超时了，喵呜~",icon: 5,closeBtn: 2,btn1: function (index) { layer.closeAll() },end: function () { layer.closeAll() }});}else     //其他错误情况以后调试过程中认知并且加入{layer.open({type: 0,content: "处理失败，喵呜~",icon: 5,closeBtn: 2,btn1: function (index) { layer.closeAll() },end: function () { layer.closeAll() }});}console.log("AJAX出错了error_xhr:");console.log(xhr);console.log("AJAX出错了error_status:");console.log(status);console.log("AJAX出错了error_e:");console.log(e);},//完成请求后触发。即在success或error触发后触发complete: function (xhr, status){layer.closeAll('loading');console.log("AJAX已完成_xhr");console.log(xhr);console.log("AJAX已完成_status:");console.log(status);},})}

参数序列化 serializeArray()

如果是可选控件，如

select

、

radio

必须是处于勾选状态（非Checked状态）。控件必须是可用的

disabled = true

$("input:checkbox:visible").each(function (){if (!$(this).is(':checked')){$(this).click().removeAttr("disabled");}})var data = $("input:checkbox[name='SNID_PK']:checked").serializeArray();

AjaxHelper

基于$.ajax声明一个简单的AjaxHelper构造器，AjaxHelper构造器的原型对象包含5个方法，分别用于处理

GET, POST, PUT, DELETE和JSONP

请求。

function AjaxHelper() {this.ajax = function(url, type, dataType, data, callback,jsonpCallback = "") {$.ajax({url: url,type: type,dataType: dataType,data: data,jsonpCallback: jsonpCallback,success: callback,error: function(xhr, errorType, error) {alert('Ajax request error, errorType: ' + errorType +  ', error: ' + error)}})}}AjaxHelper.prototype.get = function(url, data, callback) {this.ajax(url, 'GET', 'json', data, callback)}AjaxHelper.prototype.post = function(url, data, callback) {this.ajax(url, 'POST', 'json', data, callback)}AjaxHelper.prototype.put = function(url, data, callback) {this.ajax(url, 'PUT', 'json', data, callback)}AjaxHelper.prototype.delete = function(url, data, callback) {this.ajax(url, 'DELETE', 'json', data, callback)}AjaxHelper.prototype.jsonp = function(url, data, callback , jsonpCallback) {this.ajax(url, 'GET', 'jsonp', data, callback , jsonpCallback)}AjaxHelper.prototype.constructor = AjaxHelperexport default AjaxHelper

使用：

  // 导入AjaxHelperimport AjaxHelper from './AjaxHelper'// get方式请求let callback = function(data){console.log(data);}var ajaxHelper = new AjaxHelper()ajaxHelper.get("http://localhost:9090", null, callback);// jsonp方式　　let jsonp2 = function(data){console.log(data);}ajaxHelper.get("http://localhost:9090", null, callback, "jsonp2");

PHP示例

<?phpheader('Content-type: application/json');header("Access-Control-Allow-Origin:*");//获取回调函数名$callback = $_REQUEST ['callback'];if($callback != null){$json = "jsonp success";echo $callback ."(\"$json\")";  exit();}else{$arr = array();$arr[0]["moiveName"] = "美国队长3内战";$arr[1]["moiveName"] = "X战警3天启";$arr[2]["moiveName"] = "大鱼海棠";$arr[0]["id"] = "1";$arr[1]["id"] = "2";$arr[2]["id"] = "3";$arr[0]["info"] = "奥创纪元之后，全球政府联合颁布法令，管控超能力活动。对这条法令的不同态度，使复仇者阵营一分为二，钢铁侠和美国队长各据一方，其他复仇者则不得不做出自己的选择，最终引发前任盟友间的史诗大战。";$arr[1]["moiveName"] = "该片故事以20世纪80年代为背景，讲述了古老强大的第一个变种人天启在埃及醒来，他想统治并改变这个世界，而引发一系列变种人大战的故事";$arr[2]["moiveName"] = "所有人类的灵魂都是海里一条巨大的鱼，出生的时候从海的此岸出发，在路途中，有时相遇，有时分开，死的时候去到海的彼岸，之后变成一条沉睡的小鱼，等待多年后的再次出发，这个旅程永远不会结束，生命往复不息。十六岁生日那天，居住在“神之围楼”里的一个名叫椿的女孩变作一条海豚到人间巡礼，被大海中的一张网困住，一个人类男孩因为救她而落入深海死去。为了报恩，为了让人类男孩复活，她需要在自己的世界里，历经种种困难与阻碍，帮助死后男孩的灵魂——一条拇指那么大的小鱼，成长为一条比鲸更巨大的鱼并回归大海";$arr[3]["callback"] = $callback;exit(json_encode($arr));}