JSON verilerini POST (ajax) ile gönderin ve Denetleyiciden (MVC) json yanıtı alın


139

Javascript böyle bir işlev oluşturdum:

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.jsKomut dosyası dosyasını aradım ve toJSON(array)yöntem için kullandım .

Denetleyicide bu Addeylemim var

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

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

}

Ancak sendInfoyöntem parametresi null olur.

Model:

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

Veriler POST ile gönderildiğinde eylem yöntemini nasıl yapabilirim?

Nasıl kullanılacağını bilmiyorum. Ayrıca, yanıtı (ajax'a) JSON ile geri göndermek mümkün mü?


2
Merhaba yılan gözler. Kabul edilen cevabı Neha'nın cevabına değiştirebilir misiniz? Praveen Prasad'ın cevabı şu anda (yazma sırasında) JSON'u kodlayamadığı ve JSON Content-Type üstbilgisini ayarlayamadığı için kırıldı. Neha bunların ikisini de doğru bir şekilde yapıyor. Her iki yanıtı da test ettim.
null

Yanıtlar:


120

Bir model oluşturun

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

Aşağıdaki gibi Denetleyiciler

    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>

141
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) {
                ...
            }
        });

ve eylemde

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

dizinizi böyle bağlayabilirsiniz

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

Umarım bu size yardımcı olabilir.


Modeli stringify'ing, verileri kurcalayıp bazı XSS ​​güvenlik açıklarını ekleyebileceği için bazı güvenlik endişelerini artırıyor mu?
Dave

@ Hayır, bir uç nokta (bu durumda bir mvc denetleyici işlevi) ASLA bir istemciye güvenmemelidir, bu nedenle XSS denetimi sunucuda yapılmalıdır. Kontrolör, verilerin doğru şekilde ayrıştırılmasından ve verilerin arayan kişiye (webapp) geri gönderilmesinden sorumludur. Arayan aynı zamanda kemancı, postacı ya da başka bir uygulama gibi bir şey olabilir .. Umarım bu mantıklı ..
Dieterg

6
FYI, application / json ile karakter kümesi geçersiz. Karakter seti yalnızca metin / * türleri için geçerlidir. application / json, başlıklardan bağımsız olarak DAİMA UTF-8'dir.
Zengin Remer

DataType'ı istekte contentType ile değiştirdiğimde çalışır.
huangli

3
JSON.stringify () kullanarak çözdüğüm sorun, birisi neden json nesnesi gönderirken buna ihtiyacımız olduğunu çok az açıklayabilir mi?
Muhammad Zeshan Ghafoor

13

Kullanın JSON.stringify(<data>).

Kodunuzu: olarak data: sendInfodeğiştirin data: JSON.stringify(sendInfo). Umarım bu size yardımcı olabilir.


1
ContentType'ı 'application / json' olarak da ayarlamanız gerekebilir. Bazı uç noktalar tahmin edilebilir, ancak JSON olduğunu söylemek daha güvenilirdir.
null

2

JSON yayınlamak için dizgi eklemeniz gerekir. JSON.stringifyve processDataseçeneği false olarak ayarlayın.

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

0

Kişisel Sayfalarınızın bir özelliği var int Id, gönderide Idyok, bu nedenle model bağlama başarısız oluyor. Kimliği nulllable (int?) Yapın veya POst ile en az Id = 0 gönderin.


-2

Aramanıza $.toJSONve eklemenize gerek yoktraditional = true

data: { sendInfo: array },
traditional: true

yapardım.


iyi bir seçim yok! Kodunuzu takip edersem method parametresi Add(object[] sendInfo)null olur!
Snake Eyes
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.