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 = AjaxHelper

export default AjaxHelper

 

使用：

  // 导入AjaxHelper
  import 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示例

<?php 
header('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));
}