一:jquery传递JSON给MVC4后台
1.JSON传递单个参数给Controller某个Action方法
[前台js]
$(document).ready(function () {
var postData = { userId: 4 };
var url = "@Url.Action("GetUserName")";
$.ajax({
async: false,
type: "POST",
url: url,
data: postData,
cache: false,
global: false,
dataType: 'json',
success: function (data) {
}
});
});
[后台Controller:]
public ActionResult GetUserName(int userId)
{
...
}
2.JSON传递整型数组给Action
[前台js]
$(document).ready(function () {
var postData = [];
postData.push({ name: "list_UserId", value: 1 });
postData.push({ name: "list_UserId", value: 2 });
postData.push({ name: "list_UserId", value: 3 });
var url = "@Url.Action("GetUserNameList")";
$.ajax({
async: false,
type: "POST",
url: url,
data: postData,
cache: false,
global: false,
dataType: 'json',
success: function (data) {
}
});
});
[Action]
public ActionResult GetUserNameList(List<int> list_UserId)
{
.....
}
3.JSON传递单个对象参数给Action
[前台js]
$(document).ready(function () {
var postData = [];
postData.push({ name: "user.userId", value: 1 });
postData.push({ name: "user.userName", value: "小东" });
postData.push({ name: "user.desc", value: "json高手" });
var url = "@Url.Action("AddUser")";
$.ajax({
async: false,
type: "POST",
url: url,
data: postData,
cache: false,
global: false,
dataType: 'json',
success: function (data) {
}
});
});
[Action]
public ActionResult AddUser(UserObj user)
{
....
}
4.JSON传递多个参数给Action
[前台js]
$(document).ready(function () {
var postData = [];
postData.push({ name: "list_UserId", value: 1 });
postData.push({ name: "list_UserId", value: 2 });
postData.push({ name: "list_UserId", value: 3 });
postData.push({ name: "list_roleName", value: "系统管理员" });
postData.push({ name: "list_roleName", value: "部门经理" });
var url = "@Url.Action("GetUsersAndRoles")";
$.ajax({
async: false,
type: "POST",
url: url,
data: postData,
cache: false,
global: false,
dataType: 'json',
success: function (data) {
}
});
});
[Action]
public ActionResult GetUsersAndRoles(List<int> list_UserId, List<string> list_roleName)
{
...
}
二:MVC4后台返回JSON给JS前端作处理:
1.返回List集合对象
[前端js]
$(document).ready(function () {
var postData = [];
postData.push({ name: "list_UserId", value: 1 });
postData.push({ name: "list_UserId", value: 2 });
postData.push({ name: "list_UserId", value: 3 });
var url = "@Url.Action("GetUserObjList")";
$.ajax({
async: false,
type: "POST",
url: url,
data: postData,
cache: false,
global: false,
dataType: 'json',
success: function (data) {
//将获取user集合初始化下拉框列表
var options_List = '<option value="">--请选择用户--</option>';
$.each(data, function (i, user) {
options_List += "<option value='" + user.userId + "'>" + user.userName + "</option>";
});
$('#userList').html(options_List);
}
});
});
[后台action]
public ActionResult GetUserObjList(List<int> list_UserId)
{
UserObj obj1 = new UserObj();
obj1.userId = ;
obj1.userId = ;
List<UserObj> userList = new List<UserObj>();
userList.Add(new UserObj{userId = , userName = "小东", desc = "js高手"});
userList.Add(new UserObj { userId = , userName = "小明", desc = "json高手" });
userList.Add(new UserObj { userId = , userName = "小华", desc = "jquery高手" });
JsonResult jt = Json(userList.ToArray(), JsonRequestBehavior.AllowGet);
jt.ContentType = "text/html";
return jt;
}
三:最后总结:
1.无论传递json还是后台返回json，所以action无论参数有多少，参数的类型是什么，在http中都是以键值方式作为一个整包来处理。