首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >通过POST (ajax)发送JSON数据并从控制器(MVC)接收json响应

通过POST (ajax)发送JSON数据并从控制器(MVC)接收json响应
EN

Stack Overflow用户
提问于 2011-12-15 16:23:55
回答 6查看 945.8K关注 0票数 153

我用javascript创建了一个函数,如下所示:

代码语言: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操作

代码语言:javascript
复制
[HttpPost]
public ActionResult Add(PersonSheets sendInfo) {
    bool success = _addSomethingInList.AddNewSomething( sendInfo );

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

,但作为方法参数的 sendInfo 变为null。

模型:

代码语言:javascript
复制
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发送的时候,我如何在action方法中做呢?

我不知道怎么用。另外,还可以通过JSON将响应发回(到ajax)?

EN

回答 6

Stack Overflow用户

回答已采纳

发布于 2011-12-15 16:49:20

创建模型

代码语言:javascript
复制
public class Person
{
    public string Name { get; set; }
    public string Address { get; set; }
    public string Phone { get; set; }
}

如下所示的控制器

代码语言:javascript
复制
    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

代码语言: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>
票数 137
EN

Stack Overflow用户

发布于 2011-12-15 18:32:07

代码语言:javascript
复制
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) {
                ...
            }
        });

并付诸行动

代码语言:javascript
复制
public ActionResult AddDomain(IEnumerable<PersonSheets> SendInfo){
...

您可以像这样绑定数组

代码语言:javascript
复制
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);
});

希望这能对你有所帮助。

票数 148
EN

Stack Overflow用户

发布于 2014-07-10 17:09:36

使用JSON.stringify(<data>)

将代码:data: sendInfo更改为data: JSON.stringify(sendInfo)。希望这能对你有所帮助。

票数 14
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8517071

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档