ส่งข้อมูล JSON ผ่าน POST (ajax) และรับการตอบสนอง json จาก Controller (MVC)


140

ฉันสร้างฟังก์ชันใน 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เมื่อพารามิเตอร์เมธอดกลายเป็นโมฆะ

นางแบบ:

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?

ไม่ทราบวิธีใช้. นอกจากนี้ยังเป็นไปได้ที่จะส่งการตอบกลับ (ไปยัง ajax) ผ่าน JSON?


2
สวัสดีตางู คุณช่วยเปลี่ยนคำตอบที่ยอมรับเป็นคำตอบของนีฮาได้ไหม คำตอบของ Praveen Prasad ใช้งานไม่ได้ในขณะนี้เนื่องจาก (ในขณะที่เขียน) ล้มเหลวในการเข้ารหัส JSON และไม่สามารถตั้งค่าส่วนหัวประเภทเนื้อหา JSON ได้ Neha ทำทั้งสองอย่างนี้อย่างถูกต้อง ฉันได้ทดสอบทั้งสองคำตอบแล้ว
null

คำตอบ:


120

สร้างแบบจำลอง

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>

140
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);
});

หวังว่านี่จะช่วยคุณได้


การที่โมเดล stringify'ing ทำให้เกิดความกังวลด้านความปลอดภัยบางอย่างอาจทำให้ข้อมูลและแทรกช่องโหว่ของ XSS ได้หรือไม่?
Dave

@Dave no จุดสิ้นสุด (ในกรณีนี้คือฟังก์ชันตัวควบคุม mvc) ไม่ควรเชื่อถือไคลเอนต์ดังนั้นการตรวจสอบ XSS ควรทำที่เซิร์ฟเวอร์ ตัวควบคุมมีหน้าที่ในการแยกวิเคราะห์ข้อมูลด้วยวิธีที่ถูกต้องและส่งข้อมูลกลับไปยังผู้โทร (webapp) โทรยังอาจเป็นบางอย่างเช่นไวโอลินหรือบุรุษไปรษณีย์หรืออาจ app อื่น .. หวังว่านี้จะทำให้ความรู้สึก ..
Dieterg

6
FYI การส่งชุดอักขระด้วยแอปพลิเคชัน / json ไม่ถูกต้อง Charset ใช้กับประเภทข้อความ / * เท่านั้น application / json คือ UTF-8 เสมอโดยไม่คำนึงถึงส่วนหัวใด ๆ
Rich Remer

3
ปัญหาของฉันแก้ไขได้โดยใช้ JSON.stringify () ใครก็ได้ช่วยอธิบายหน่อยได้ไหมว่าทำไมเราถึงต้องการสิ่งนี้ในขณะที่มีคนส่งวัตถุ json
Muhammad Zeshan Ghafoor

1
@MohammadZeshan น่าจะเป็นเพราะร่างกายข้ามเส้นลวดดูเหมือนว่า[object]แทนที่จะเป็นสตริงค่าของคุณ คุณจะขอให้จุดสิ้นสุดซึ่งน่าจะเป็น C # เพื่ออ่านวัตถุ JavaScript
vapcguy

13

ใช้JSON.stringify(<data>).

เปลี่ยนรหัสของคุณ: data: sendInfoเป็นdata: JSON.stringify(sendInfo). หวังว่านี่จะช่วยคุณได้


1
คุณอาจต้องตั้งค่า contentType เป็น 'application / json' ด้วย จุดสิ้นสุดบางจุดอาจเดาได้ แต่การบอกว่าเป็น JSON นั้นน่าเชื่อถือกว่า
null

3

ในการโพสต์ JSON คุณจะต้องสตริง JSON.stringifyและตั้งค่าprocessDataตัวเลือกเป็นเท็จ

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

0

PersonSheets ของคุณมีทรัพย์สินint Id, Idไม่ได้อยู่ในการโพสต์เพื่อให้ modelbinding ล้มเหลว ทำให้ Id nullable (int?) หรือส่ง atleast Id = 0 ด้วย POst


-2

คุณไม่จำเป็นต้องโทร$.toJSONและเพิ่มtraditional = true

data: { sendInfo: array },
traditional: true

จะทำ.


ไม่มีทางเลือกที่ดี! ถ้าฉันทำตามโค้ดของคุณพารามิเตอร์ method Add(object[] sendInfo)จะเป็นโมฆะ!
Snake Eyes
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.