【转】Jquery ajax与asp.net MVC前后端各种交互

本文转载自：https://www.cnblogs.com/fengyeqingxiang/p/11169218.html

1.Jquery通过ajaxSubmit提交表单

if (jQuery("#Edit_from").validate().form()) {
    jQuery("#Edit_from").ajaxSubmit(function (res) {
        if (res > 0) {
            layer.msg('提交成功！', { icon: 1 });
            setTimeout(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.refresh();
                parent.layer.close(index);
            }, 1000);
        }else {
            layer.msg('提交失败！', { icon: 2 });
        }
    })
}

[HttpPost]
public int ProjectEdit(Model.Admin.EditModel model)
{
    int n = 0;
    if (model.Id > 0)//编辑
    {
        n = bll.Update(model);
    }
    else
    {

        n = bll.Add(model);
    }
    return n;
}

2.Jquery通过get方式获取后台Json数据

$.get("/Admin/GetUserById?id=" + userId, function (data) {
    if (data != undefined && data != "") {
       var username = data.username;
    }
});

/// <summary>
/// 根据用户Id获取用户信息
/// </summary>
/// <param name="id">用户ID</param>
/// <returns></returns>
public JsonResult GetUserById(int id)
{
    var bll = new UserInfo();
    var model = bll.GetModel(id);
    return Json(model, JsonRequestBehavior.AllowGet);
}

3.Jquery通过Ajax方式请求接口并返回Json数据结果

$.ajax({
    type: "POST",
    url: "/Admin/DeleteUserById",
    async: true,//默认true异步，同步设置为false
    cache: true,//默认true缓存数据，设置为false不做缓存处理
    data: {
        "id": userid,
        "name":"zhangsan"
    },
    dataType: "json",
    success: function (data) {
        if (data.msg>0) {
            window.parent.location.reload(); //刷新父页面
            setTimeout(function () {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }, 1000);
        }
        else {
            layer.msg("删除失败！");
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert(XMLHttpRequest.status);
        alert(XMLHttpRequest.readyState);
        alert(textStatus);
    },
    complete: function (XMLHttpRequest, textStatus) {
        this; // 调用本次AJAX请求时传递的options参数
    }
});

/// <summary>
/// 删除用户
/// </summary>
/// <param name="id">用户ID</param>
/// <param name="name">用户名称</param>
/// <returns></returns>
public JsonResult DeleteUserById(int id,string name)
{
    int n = 0;
    var bll = new BLL.UserInfo();
    n= bll.Delete(id);
    return Json(new
    {
        msg = n
    }, JsonRequestBehavior.AllowGet);
}

4.Jquery通过post方式处获取后台数据

$.post("/Admin/DeleteUserById", { id: userid}, function (result) {
    if (parseFloat(result) > 0) {
        $(".pop_contents_search .line-div[data-val='" + ID + "']").remove();
    }
    else {
        layer.msg('删除失败！', { icon: 2 });
    }
});

/// <summary>
///  删除用户
/// </summary>
/// <param name="ID"></param>
/// <returns></returns>
[HttpPost]
public int DeleteUserById(int id)
{
    var bll = new BLL.UserInfo();
    return bll.Delete(id);
}

5.Jquery通过get方式获取后台Json列表数据

$.get("@Url.Action("GetUserList")?state=" + state, function (data) {
    $.each(data, function (i, item) {
        html += "<tr><td>"+item.username+"</td>";
        html += "<td>" + (item.Status == 0 ? "正常" : "<font style='color:red'>异常</font>") + "</td>";
    });
    $("#UserInfoList").html(html);
}, "json");

public JsonResult GetUserList(int state)
{
    var bll = new BLL.UserInfo();
    var list = bll.QueryList("State='"+state+"'");
    return new JsonResult
    {
        Data = list.Select(n => new
        {
            n.id,
            newName=n.Name,
            n.State,
            n.LoginName,
            n.PassWord,
            n.CreateDate,
            sex = n.sex == 1?"男":"女"
        }),
        JsonRequestBehavior = JsonRequestBehavior.AllowGet
    };
}