使用 jquery 和 ajax 将 json 对象发布到 mvc 控制器

Posted 2023-02-22

【中文标题】使用 jquery 和 ajax 将 json 对象发布到 mvc 控制器

【英文标题】：Post a json object to mvc controller with jquery and ajax

【发布时间】：2014-03-01 12:38:53

【问题描述】：

我正在尝试将一些值从表单提交到我的 mvc 控制器。

这是我的控制器：

 //Post/ Roles/AddUser
    [HttpPost]       
    public ActionResult AddUser(String json)
    
        Log.submit(json);            
        return View();
    

这里是js：

<script>
function submitForm() 

    var usersRoles = new Array;
    $("#dualSelectRoles2 option").each(function () 
        usersRoles.push($(this).val());
    );
    console.log(usersRoles);

    jQuery.ajax(
        type: 'POST',
        url: "@Url.Action("AddUser")",
        contentType: "application/json; charset=utf-8",
        datatype: 'json',
        data: JSON.stringify(usersRoles),
        success: function (data)  alert(data); ,
        failure: function (errMsg) 
            alert(errMsg);
        
    );

当我在控制器上调试时，我的参数为空？ console.log(usersRoles) 给了我数据。

我做错了什么？

如何在控制器中接收 json 对象？

【参考方案1】：

我做错了什么？

您必须将 html 转换为 javascript 对象，然后通过 JSON.Stringify 作为 json 的第二步。

如何在控制器中接收 json 对象？

查看：

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://raw.githubusercontent.com/marioizquierdo/jquery.serializeJSON/master/jquery.serializejson.js"></script>

var obj = $("#form1").serializeJSON( useIntKeysAsArrayIndex: true );
$.post("http://localhost:52161/Default/PostRawJson/",  json: JSON.stringify(obj) );

<form id="form1" method="post">
<input name="OrderDate" type="text" /><br />
<input name="Item[0][Id]" type="text" /><br />
<input name="Item[1][Id]" type="text" /><br />
<button id="btn" onclick="btnClick()">Button</button>
</form>

控制器：

public void PostRawJson(string json)

    var order = System.Web.Helpers.Json.Decode(json);
    var orderDate = order.OrderDate;
    var secondOrderId = order.Item[1].Id;

【参考方案2】：

我在您的代码中看到您正在尝试将 ARRAY 传递给 POST 操作。在这种情况下，请遵循以下工作代码 -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    function submitForm() 
        var roles = ["role1", "role2", "role3"];

        jQuery.ajax(
            type: "POST",
            url: "@Url.Action("AddUser")",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(roles),
            success: function (data)  alert(data); ,
            failure: function (errMsg) 
                alert(errMsg);
            
        );
    
</script>

<input type="button" value="Click" onclick="submitForm()"/>

控制器动作将是 -

    public ActionResult AddUser(List<String> Roles)
    
        return null;
    

然后当你点击按钮时——

【讨论】：

我花了一段时间试图让这个模型绑定方法工作，但我的控制器参数只为空。我发现我有一个 JavaScript 错误，它只添加了一个只有一列的项目。确保您传递的 JSON 与模型完美匹配。如果没有，你只会得到一个空参数，没有任何线索或消息

【参考方案3】：

模型绑定不是接收 json 字符串更好。例如：

[HttpPost]       
public ActionResult AddUser(UserAddModel model)

    if (ModelState.IsValid) 
        return Json(new  Response = "Success" );
    
    return Json(new  Response = "Error" );


<script>
function submitForm()     
    $.ajax(
        type: 'POST',
        url: "@Url.Action("AddUser")",
        contentType: "application/json; charset=utf-8",
        dataType: 'json',
        data: $("form[name=UserAddForm]").serialize(),
        success: function (data) 
            console.log(data);
        
    );

</script>

【讨论】：

我如何制作 UserAddModel ？

但我正在提交一个 json 对象。不是多个变量？

不知道为什么你必须这样做。无论如何，你能显示html吗？ usersRoles 数组中有什么？

尝试从您的 ajax 函数中删除 contentType 并使用数据："json": JSON.stringify(usersRoles)