摘要：前言在一個項目中，前后端的交互是很頻繁的。內(nèi)容提示先獲取的值，如果沒有，獲取的值。

在一個項目中，前后端的交互是很頻繁的。
有的是要獲取一個數(shù)據(jù)，有的是要改標一個狀態(tài)，有的是需要提交用戶輸入，有的是要上傳一個文件，本文就是這么的一個代碼

/**
 * 通用的js前后端交互代碼
 * 依賴layer.js
 * ajaxPost處理本頁提交的js請求，不對返回結(jié)果做處理，只 "顯示" 或者 "刷新頁面" 或者 "跳轉(zhuǎn)"
 * ajaxGet同上，但是沒有data選項，如果有數(shù)據(jù)發(fā)送，跟隨在url中
 * ajaxFile表單文件提交
 * ajaxForm表單提交
 * 表單提交的時候，需要提交的選項用class="send-item"標識，默認必填項。
 * 內(nèi)容提示先獲取data-msg的值，如果沒有，獲取palceholder的值。
 * 如果不是必填項，需要添加no-required，即class="send-item no-required"
 * 表單帶有文件上傳的時候有兩種，一種是先上傳文件，獲得返回值即文件的存儲路徑，提交表單的時候提交文件存儲路徑，請使用ajaxForm
 * 如果文件內(nèi)容跟隨表單提交，請使用ajaxFile
 */
function ajaxPost(url, data){
    layer.closeAll("msg");
    layer.load();
    $.ajax({
        url: url,
        data: data,
        type: "post",
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}
function ajaxGet(url){
    layer.closeAll("msg");
    layer.load();
    $.ajax({
        url: url,
        type: "get",
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}
function ajaxFile($form,tips){
    layer.closeAll("msg");
    var url = $form.prop("action");
    var data = new FormData();
    var status = true;
    $form.find(".send-item").each(function(index,elem){
        if(!status){
            return false;
        }
        var name = elem.name;
        var value = elem.value;
        var type = elem.type;
        var msg = $(elem).data("msg") || elem.placeholder;        
        if(type != "password"){
            value = value.trim();
        }
        if(elem.type == "checkbox" && !elem.checked){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            } 
            status = false;
        }
        if(elem.type == "file" && !elem.files[0]){
            if(tips){
                layer.tips(msg, $(elem).parent(), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            } 
            status = false;
        }
        if(status && value == "" && !$(this).hasClass("no-required")){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            } 
            status = false;
        }
        if(elem.type == "file"){
            var file = elem.files[0];
            data.append("upload[]", file, file.name);
        }else{
            data.append(name,value);
        }
    });
    if(!status){
        return false;
    }
    layer.load();
    $.ajax({
        url: url,
        data: data,
        type: "post",
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}
function ajaxForm($form,tips){
    var url = $form.prop("action");
    var data = {};
    var status = true;
    $form.find(".send-item").each(function(index,elem){
        if(!status){
            return false;
        }
        var name = elem.name;
        var value = elem.value;
        var type = elem.type;
        var msg = $(elem).data("msg") || elem.placeholder;
        if(type != "password"){
            value = value.trim();
        }
        if(elem.type == "checkbox" && !elem.checked){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            }            
            status = false;
        }
        if(status && value == "" && !$(this).hasClass("no-required")){
            if(tips){
                layer.tips(msg, $(elem), {tips: 2, time: 1e3});
            }else{
                layer.msg(msg, {icon: 0, time: 1e3, maxWidth: 260});
            }
            status = false;
        }
        data[name] = value;
    });

    if(!status){
        return false;
    }
    layer.load();
    $.ajax({
        url: url,
        data: data,
        type: "post",
        dataType: "json",
        success: function(res){
            success(res);
        }
    })
}

function success(res){
    /**
     * @res = {status: 1, msg: "", url: ""};
     * @status => 0 失敗  
     * @status => 1 成功
     * @msg => "提示"
     * @url => "reload" 頁面需要刷新
     * @url => "/base" 頁面跳轉(zhuǎn)到"/base"
     */
    layer.closeAll("loading");
    if(res.msg){
        layer.msg(res.msg, {icon: res.status, time: 2e3, maxWidth: 260}, function(){
            if(res.url == "reload"){
                window.location.reload();
                return false;
            }
            if(res.url){                        
                window.location.href = res.url;
            }
        });
    }else{
        if(res.url == "reload"){
            window.location.reload();
            return false;
        }
        if(res.url){                        
            window.location.href = res.url;
        }
    }
}