Jquery ajax與asp.net MVC先後端各類交互

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 }; }