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

Posted 2023-04-01

【中文标题】通过 POST (ajax) 发送 JSON 数据并从 Controller (MVC) 接收 json 响应

【英文标题】：Send JSON data via POST (ajax) and receive json response from Controller (MVC)

【发布时间】：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 正确地做到了这两点。我已经测试了这两个答案。

【参考方案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) 将为空！