通过 POST (ajax) 发送 JSON 数据并从 Controller (MVC) 接收 json 响应答案

【问题标题】：Send JSON data via POST (ajax) and receive json response from Controller (MVC)通过 POST (ajax) 发送 JSON 数据并从 Controller (MVC) 接收 json 响应
【发布时间】：2012-01-20 23:17:50
【问题描述】：

我在 javascript 中创建了一个这样的函数：

function addNewManufacturer() {
    var name = $("#id-manuf-name").val();
    var address = $("#id-manuf-address").val();
    var phone = $("#id-manuf-phone").val();
    
    var sendInfo = {
        Name: name,
        Address: address,
        Phone: phone
    };
    
    $.ajax({
        type: "POST",
        url: "/Home/Add",
        dataType: "json",
        success: function (msg) {
            if (msg) {
                alert("Somebody" + name + " was added in list !");
                location.reload(true);
            } else {
                alert("Cannot add to list !");
            }
        },
        data: sendInfo
    });
}

我调用了jquery.json-2.3.min.js 脚本文件并将它用于toJSON(array) 方法。

在控制器中，我有这个Add 操作

[HttpPost]
public ActionResult Add(PersonSheets sendInfo) {
    bool success = _addSomethingInList.AddNewSomething( sendInfo );

    return this.Json( new {
         msg = success
    });
      
}

但是sendInfo作为方法参数变成了null。

型号：

public struct PersonSheets
{
    public int Id;
    public string Name;
    public string Address;
    public string Phone;
}

public class PersonModel
{
    private List<PersonSheets> _list;
    public PersonModel() {
         _list= GetFakeData();
    }

    public bool AddNewSomething(PersonSheets info) {
         if ( (info as object) == null ) {
            throw new ArgumentException( "Person list cannot be empty", "info" );
         }

         PersonSheets item= new PersonSheets();
         item.Id = GetMaximumIdValueFromList( _list) + 1;
         item.Name = info.Name;
         item.Address = info.Address;
         item.Phone = info.Phone;
             
         _list.Add(item);

         return true;
    }
}

当使用 POST 发送数据时，我该怎么做？

我不知道怎么用。此外，是否可以通过 JSON 将响应（给 ajax）发回？

【问题讨论】：

嗨蛇眼。您能否将接受的答案更改为 Neha 的答案？ Praveen Prasad 的答案目前已被打破，因为它（在撰写本文时）无法对 JSON 进行编码，并且无法设置 JSON Content-Type 标头。 Neha 正确地做到了这两点。我已经测试了这两个答案。

标签： jquery ajax asp.net-mvc json

【解决方案1】：

var SendInfo= { SendInfo: [... your elements ...]};

        $.ajax({
            type: 'post',
            url: 'Your-URI',
            data: JSON.stringify(SendInfo),
            contentType: "application/json; charset=utf-8",
            traditional: true,
            success: function (data) {
                ...
            }
        });

在行动中

public ActionResult AddDomain(IEnumerable<PersonSheets> SendInfo){
...

你可以像这样绑定你的数组

var SendInfo = [];

$(this).parents('table').find('input:checked').each(function () {
    var domain = {
        name: $("#id-manuf-name").val(),
        address: $("#id-manuf-address").val(),
        phone: $("#id-manuf-phone").val(),
    }

    SendInfo.push(domain);
});

希望对您有所帮助。

【讨论】：

对模型进行字符串化是不是会引起一些安全问题，因为它会篡改数据并插入一些 XSS 漏洞？
@Dave 不，端点（在这种情况下是 mvc 控制器功能）不应该信任客户端，因此应该在服务器上进行 XSS 检查。控制器负责以正确的方式解析数据并将数据发送回调用者（webapp）。调用者也可能是提琴手、邮递员或其他应用程序。希望这是有道理的。
仅供参考，发送带有 application/json 的字符集是无效的。 Charset 仅适用于 text/* 类型。 application/json 总是 UTF-8，不管任何标题。
我的问题使用 JSON.stringify() 解决了，如果有人发送 json 对象，谁能解释一下为什么我们需要这个？
@MohammadZeshan 可能是因为身体，穿过电线，看起来像[object]，而不是你的值字符串。您会要求端点（可能是 C#）读取 JavaScript 对象。

【解决方案2】：

创建模型

public class Person
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
}

如下所示的控制器

    public ActionResult PersonTest()
    {
        return View();
    }

    [HttpPost]
    public ActionResult PersonSubmit(Vh.Web.Models.Person person)
    {
        System.Threading.Thread.Sleep(2000);  /*simulating slow connection*/

        /*Do something with object person*/


        return Json(new {msg="Successfully added "+person.Name });
    }

Javascript

<script type="text/javascript">
    function send() {
        var person = {
            name: $("#id-name").val(),
            address:$("#id-address").val(),
            phone:$("#id-phone").val()
        }

        $('#target').html('sending..');

        $.ajax({
            url: '/test/PersonSubmit',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                $('#target').html(data.msg);
            },
            data: JSON.stringify(person)
        });
    }
</script>

【讨论】：

【解决方案3】：

使用JSON.stringify(<data>)。

更改您的代码：data: sendInfo 为 data: JSON.stringify(sendInfo)。希望对您有所帮助。

【讨论】：

您可能还需要将 contentType 设置为 'application/json'。一些端点可能会猜到，但告诉他们这是 JSON 更可靠。

【解决方案4】：

要发布 JSON，您需要对其进行字符串化。 JSON.stringify 并将 processData 选项设置为 false。

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback
});

【讨论】：

【解决方案5】：

您的 PersonSheets 有一个属性 int Id，Id 不在帖子中，因此模型绑定失败。使 Id 可以为空（int？）或使用 POst 发送至少 Id = 0。

【讨论】：

【解决方案6】：

您无需致电$.toJSON 并添加traditional = true

data: { sendInfo: array },
traditional: true

会的。

【讨论】：

没有好的选择！如果我遵循您的代码，那么方法参数Add(object[] sendInfo) 将为空！