POST (ajax) के माध्यम से JSON डेटा भेजें और नियंत्रक (MVC) से json प्रतिक्रिया प्राप्त करें


139

मैंने इस तरह जावास्क्रिप्ट में एक समारोह बनाया:

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 के साथ भेजा गया था तो मैं एक्शन विधि में कैसे कर सकता था?

मैं नहीं जानता कि कैसे उपयोग करना है। इसके अलावा, JSON के माध्यम से प्रतिक्रिया (ajax) को वापस भेजना संभव है?


2
हाय साँप की आँखें। क्या आप नेहा के जवाब के लिए स्वीकृत उत्तर को बदल सकते हैं? प्रवीण प्रसाद का जवाब वर्तमान में टूट गया है क्योंकि यह (लिखने के समय) JSON को एन्कोड करने में विफल रहता है, और JSON कंटेंट-टाइप हेडर को सेट करने में विफल रहता है। नेहा इन दोनों को सही ढंग से करती है। मैंने दोनों उत्तरों का परीक्षण किया है।
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 });
    }

जावास्क्रिप्ट

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

और कार्रवाई में

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

आशा है इससे आपको सहायता मिलेगी।


क्या ऐसा नहीं है कि मॉडल को सख्त करना कुछ सुरक्षा चिंताओं को बढ़ाता है जैसा कि डेटा में छेड़छाड़ और कुछ एक्सएसएस कमजोरियों को सम्मिलित कर सकता है?
दवे

@ नहीं, एक समापन बिंदु (इस मामले में एक एमएक्स नियंत्रक फ़ंक्शन) को कभी भी एक ग्राहक पर भरोसा नहीं करना चाहिए, इसलिए सर्वर पर एक्सएसएस चेक किया जाना चाहिए। नियंत्रक सही तरीके से डेटा पार्स करने के लिए ज़िम्मेदार है और कॉलर (वेबैप) को डेटा वापस भेज देता है। कॉल करने वाला भी फ़िडलर, या डाकिया, या शायद एक और ऐप जैसा हो सकता है .. आशा है कि यह समझ में आता है ..
डिटर्जेंट

6
FYI करें, एप्लिकेशन / जोंस के साथ चारसेट भेजना अमान्य है। चारसेट केवल पाठ / * प्रकारों पर लागू होता है। आवेदन / जसन किसी भी हेडर की परवाह किए बिना हमेशा के लिए UTF-8 है।
रिच रिमेम्बर

जब मैं अनुरोध में डेटाटाइप के साथ डेटाटाइप को प्रतिस्थापित करता हूं, तो यह काम करता है।
हुआंगली

3
JSON.stringify () का उपयोग करके मेरी समस्या हल हो गई है, क्या कोई यह समझा सकता है कि जब हमें किसी को json ऑब्जेक्ट भेजना हो तो हमें इसकी आवश्यकता क्यों है?
मुहम्मद जीशान गफूर

13

का उपयोग करें JSON.stringify(<data>)

अपना कोड बदलें: data: sendInfoको data: JSON.stringify(sendInfo)। आशा है इससे आपको सहायता मिलेगी।


1
आपको कंटेंटटाइप को 'एप्लिकेशन / जसन' पर भी सेट करना पड़ सकता है। कुछ एंडपॉइंट्स अनुमान लगा सकते हैं, लेकिन उन्हें यह बताना कि JSON अधिक विश्वसनीय है।
अशक्त

2

JSON पोस्ट करने के लिए, आपको इसे कड़ा करना होगा। JSON.stringifyऔर सेट करेंprocessData विकल्प को गलत पर ।

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

0

आपके पर्सनशीट में एक संपत्ति है int Id, Idपोस्ट में नहीं है, इसलिए मॉडलबाइंडिंग विफल हो जाती है। आईडी को अशक्त (int?) बनाएं या POst के साथ कम से कम Id = 0 भेजें।


-2

आपको कॉल करने $.toJSONऔर जोड़ने की आवश्यकता नहीं हैtraditional = true

data: { sendInfo: array },
traditional: true

करेंगे।


कोई अच्छा विकल्प नहीं! अगर मैं आपके कोड का पालन करता हूं तो विधि पैरामीटर Add(object[] sendInfo)शून्य हो जाएगा!
सांप की आंखें
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.