ASP.NET MVC 之各种jQuery提交模式实例

 

1.$.ajax提交

1). dataType: "json" 用于标识对response的数据做JSON序列化,即无需再做JSON.pase处理

2). contentType 用于设置Request Header的Content-Type值,与请求发送参数有关,相关知识: xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")表示表单提交，提交的数据是名值对的方式。普通的post请求发送到数据格式不固定，如果不标识的话，服务器无法知道具体的处理方式，所以只能通过获取原始数据流的方式来进行解析。而使用原生ajax请求时，如果不显示的设置Content-Type，那么默认是text/plain，这时服务器就不知道怎么解析数据了，所以才只能通过获取原始数据流的方式来进行解析请求数据。

3).  processData: false  默认值是true, 对象格式的请求参数会默认调用 jQuery.param() 请查询对象转成查询字符串。设置成false后,对象格式的请求参数会保留对象格式, 接着需要与 contentType: "application/json;charset=UTF-8",  data: JSON.stringify(requestParam)  配合使用, 而服务端需要coding对应的解析对象。

var _data = { tableName: "movie", fieldName: "saveLocal" };
$.ajax({
    url: "/Admin/Default/GetDictItem",
    type: "POST",
    data: JSON.stringify(_data), //必须处理
    processData: false,
    dataType: "json",
    contentType: "application/json",//和请求参数格式相一致,这里为Request Payload类型
    success: function (data) {
        //var jsonData = JSON.parse(data).data;//因为第7行,所以无需处理
        select = $('.saveLocal').select2({
            tags: true,
            //multiple: true,
            //placeholder: "Select ...",
            data: data.data
        });
    },
    error: function () {

    }
});

其它:  contentType: "application/x-www-form-urlencoded;charset=UTF-8",//默认值,可以不写 当设置为这种值时,发现请求发送参数类型变成了Form Data,下面的服务代码依旧可以得到请求值.

Form Data
groupByName:TableName

服务端代码,以post Request Payload 方式发送请求参数, 必须告诉服务端怎样解析参数

public string GetDictItem(string tableName,string fieldName)
{
    tcfg_dictitemBLL dictitemBLL = new tcfg_dictitemBLL();
    List<SqlDbParameter> parms = new List<SqlDbParameter>();
    //List<tcfg_dictitemEntity> dictItemList = dictitemBLL.GetAlltcfg_dictitem(parms, "TableName,FieldName,OrderNumber");
    //字典:影片的保存位置
    List<tcfg_dictitemEntity> categoryByLocalSelect = dictitemBLL.GetDictitemEntity(tableName, fieldName);  //movie     saveLocal

    IDictionary info = new Hashtable();
    ArrayList selectOptionList = new ArrayList() { };
    selectOptionList.Add(new SelectOption { text = "请选择类别" });
    foreach (tcfg_dictitemEntity dictItemEntity in categoryByLocalSelect)
    {
        SelectOption option = new SelectOption { id = dictItemEntity.PropertyValue.Value, text = dictItemEntity.PropertyName };
        selectOptionList.Add(option);
    }
    info.Add("data", selectOptionList);
    return JsonConvert.SerializeObject(info);
}

例子2

var _data = {
    "dictItemID": dictItemID,
    "itemType": itemType,
    "itemName": itemName,
    "itemCode": itemCode
};
$.ajax({
    url: "/System/DictItemAdd",
    type: "POST",//此参数在这必须要设置,否则服务端无法获取参数值
    async: false,
    data: _data,
    dataType: "json",
    success: function (data) {
        if (data.result === "error") {
            alert(data.msg);
        }
        else {
            window.location.href = "..\\System\\DictItemManage";
        }
    },
    error: function () {
    }
});

对应的服务的代码

public JsonResult DictItemAdd()
{
    //...
    dictItem.ItemType = Convert.ToInt32(Request.Form["itemType"]);
    dictItem.ItemName = Request.Form["itemName"];
    dictItem.ItemCode = Request.Form["itemCode"];

    if (string.IsNullOrEmpty(Request.Form["dictItemID"]))
    {
        //...
        return Json(new { result = "", msg = "记录添加失败" });
    }
    else
    {
        //..
        return Json(new { result = "", msg = "记录更新失败" });
    }
}

 例子2

第6行:dataType:"json", 用于标识返回的数据格式是json,必须和服务端对应的方法返回值的类型对应.

第8行:和服务器有对应关系

 1 $.ajax({
 2     url: "/System/GetRoleMenuByRoloID",
 3     type: "POST",
 4     async: false,
 5     data: _data,
 6     dataType: "json",
 7     success: function (data) {
 8         var roleRecords = JSON.parse(data.result);
 9         for (var i = 0; i < roleRecords.length; i++) {
10             if (roleRecords[i].MenuID != null) {
11                 $("input[name='" + roleRecords[i].MenuID + "']").attr("checked", true);;
12             }
13         }
14     },
15     error: function () {
16        debugger
17     }
18 });

public JsonResult GetRoleMenuByRoloID(string roleID)
{
    //...
    DataTable dt = bll.GetRoleScope(parms);
    return Json(new { result = JsonConvert.SerializeObject(dt), msg = "" });
}

$.ajax单对象提交

var puzzleObj = GetFormInfo("puzzle");//封装一个JSON对象,它的属性与服务端方法参数对象属性保持一致(大小写)
puzzleObj.EnablePuzzleName = $("#EnablePuzzle").find("option[value='" + puzzleObj.EnablePuzzle + "']").text();
puzzleObj.CompanyID = $("#cid").val(); 
$.ajax({
    processData: false,
    url: "/Company/UpdateCompanyForPuzzle",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify(puzzleObj),
    success: function (data) {
        SetFormInfo("show", puzzleObj);
    },
    error: function () {
        debugger
    }
});

public string UpdateCompanyForPuzzle(tbiz_CompanyEntity entity)
{
    tbiz_CompanyBLL companyBLL = new tbiz_CompanyBLL();
    int result = companyBLL.UpdateCompanyPuzzleConfig(entity);
    return JsonConvert.SerializeObject(result);
}

//MVC默认会自动提取参数并封装成entity对象

$.ajax 提交 之processData: false,contentType: "application/json"

这个方式当服务端方法coding好对应的ViewModel,MVC默认是自动解析好提交参数的,对于这点的原理待学习

var _menus = [];
var checkbox = $("#table_module input[type='checkbox']");
for (var i = 0; i < checkbox.length; i++) {
    if ($(checkbox[i]).is(':checked')) {
        var scopeData = $(checkbox[i]).parent().find("input[type='hidden']").val();
        var menuID = $(checkbox[i]).attr("name");
        var menu = { "MenuID": menuID, "RoleID": roleID, "ScopeData": scopeData };
        _menus.push(menu);
    }
}
if (_menus.length > 0) {
    var _menusStr = JSON.stringify(_menus);
    $.ajax({
        processData: false,
        url: "/System/SaveRoleMenuByRoloID",
        type: "POST",
        contentType: "application/json",
        async: false,
        data: _menusStr,//提交前必须序列化
        dataType: "json",
        success: function (data) {
            window.location.href = "..\\System\\RoleManage";
        },
        error: function () {
            debugger
        }
    });
}

服务端

public JsonResult SaveRoleMenuByRoloID(IList<Menu> records)//定义与JS对应的Menu实体,MVC会自动解析提交参数

 

2.$.post

1).以jQuery的$.post方法提交请求, 并用JSON.parse()方法解析Action方法所返回的由JsonConvert.SerializeObject()方法所序列化的对象字符串结果

2).注意提交请求参数与接受参数的方式

function loadDictItem(obj) {
    var id = $(obj).attr("data-dictitemID");
    if(id !=="")
    {
        $.post("..\\System\\BindDictItemById", { "dictitemID": id }, function (data) {
            var dtResult = JSON.parse(data);
            $("#txtItemName").val(dtResult.ItemName);
            $("#txtItemCode").val(dtResult.ItemCode);
            $("#ItemType").prop("value", dtResult.ItemType);
        });
    }
}

//直接返回JSON格式字面值

public string BindDictItemById(string dictitemID)
{
    SystemBLL bll = new SystemBLL();
    tcfg_DictItemEntity dictItem = bll.GetDictItemByID(dictitemID);
    return JsonConvert.SerializeObject(dictItem);
}

3).$.post()可以直接解析由Action返回的JSON格式数据

function delDictItem(obj) {
    var id = $(obj).attr("data-dictitemID");
    if (id !== "") {
        $.post("..\\System\\DelDictItemById", { "dictitemID": id }, function (data) {
            if (data.result === "ok") {
                $(obj).parent().parent().remove();
            }
        });
    }
}

public JsonResult DelDictItemById(string dictitemID)
{
    SystemBLL bll = new SystemBLL();
    tcfg_DictItemEntity dictItem = bll.GetDictItemByID(dictitemID);
    dictItem.IsDelete = 1;
    string result = bll.UpdateDictItem(dictItem) > 0 ? "ok" :"fail";
    return Json(new { result = result, msg = "" });
}

 $.ajax 参数API

async: false,  //async. 默认是 true，即为异步方式
dataType: "json",
data: _data,//参数,_data可以是obj结构    
processData: false,
contentType: "application/json"    // 1)表示向服务端发送的参数的数据格式必须是json形式字符串,和data参数相关联;
                                   // 2)不添加 contentType：“application/json“的时候可以向后台发送json对象形式的字符串;
                                   // 3)当向后台传递复杂json的时候，同样需要添加 contentType：“application/json“，然后将数据转化为字符串; 
                                   // 如果不设置, 在ASP.NET MVC 用action 方法原生对象参数接受请求参数时,无法接收并解析参数 

 参考

提交数组并接接收

function batchSeach() {
    var staffNameList = $("#staff_name_list").val();
    var staffArray = staffNameList.split("\n");
    var lengthNum = staffArray.length;
    //staffArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "L"];
    var limit = 5;//每页个数
    var pagenum = Math.ceil(staffArray.length / limit);//总页数
    for (var i = 0; i < pagenum; i++) {
        var curpage = i + 1;
        var start = limit * (curpage - 1);
        var perpage = staffArray.slice(start, start + limit);
        $.ajax({
            async: false,
            //processData: false,该方式下,不用设置此参数,否则后台解析不了参数
            type: "POST",
            traditional: true,
            dataType: "json",//返回类型已经是JSON
            url: "/Staff/Batch",
            data: { "names": perpage},
            success: function (data) {
                bindDataTable(data);
            },
            error: function () {
               
            }
        });
    }
    return;
}

public string Batch(List<string> names)
{
    for (int i = 0; i < names.Count; i++)
    {
    /* code */
    }
    return JsonConvert.SerializeObject(new { result = true, message = "",data= dataTable });
}

 当后端API方法返回dynamic 类型结果

//当API返回dynamic 类型结果时,前端相当于直接拿到了JSON数据类型,无效再JSON.parse
success: function (data) {
    //var _data = JSON.parse(data).data;
    var _data = data.data;
    artist_select = $('.search_artist').select2({
        placeholder: "Select ...",
        data: _data
    });
    edit_artist_select = $('.edit_artist').select2({
        placeholder: "Select ...",
        data: _data
    });
},
error: function () {

}