JQuery के साथ प्रपत्र डेटा को जावास्क्रिप्ट ऑब्जेक्ट में बदलें

Question

मैं अपने फॉर्म के सभी तत्वों को जावास्क्रिप्ट ऑब्जेक्ट में कैसे बदलूं?

मैं प्रत्येक तत्व पर लूप लिए बिना, अपने फॉर्म से स्वचालित रूप से एक जावास्क्रिप्ट ऑब्जेक्ट बनाने का कोई रास्ता निकालना चाहूंगा। मुझे एक स्ट्रिंग नहीं चाहिए, जैसा $('#formid').serialize();कि मैंने दिया , और न ही मैं चाहता हूं कि नक्शा वापस आए$('#formid').serializeArray();

Comments

क्योंकि पहला एक स्ट्रिंग लौटाता है, ठीक उसी तरह जैसे आप एक गेट विधि के साथ फॉर्म जमा करने पर आपको क्या मिलेगा, और दूसरा आपको वस्तुओं का एक सरणी देता है, प्रत्येक का नाम मान जोड़ी के साथ होता है। मैं चाहता हूं कि यदि मेरे पास "ईमेल" नाम का कोई फ़ील्ड है, तो मुझे एक ऑब्जेक्ट मिलता है, जो मुझे obj.email के साथ उस मान को पुनः प्राप्त करने की अनुमति देगा। SerializeArray () के साथ, मुझे obj [indexOfElement] .value जैसी कुछ चीज़ करनी होगी

— Yisroel

@ जेम्स - डी। क्रॉफोर्ड की JSON-js लाइब्रेरी का उपयोग करके स्वीकृत उत्तर। यहाँ एक उदाहरण है: github.com/tleese22/google-app-engine-jappstart/blob/master/src/…

— टेलर लेसे

@Taylor हाँ, मैं कहेंगे सही जवाब Crockford के lib और टोबियास 'तो जैसे समारोह: JSON.stringify ($ (' का उपयोग करता है। MyForm ') serializeObject ())

— जेम्स मककोरमैक

@ जॉन्ज - फॉर्म एलिमेंट का उपयोग करने के लिए सबमिट / ट्रांसमिशन के अलावा अन्य कारण भी हैं। यदि आप जावास्क्रिप्ट (उदाहरण के लिए सिंगल पेज ऐप) के साथ फॉर्म वैल्यू के साथ कोई भारी लिफ्टिंग कर रहे हैं, तो उन्हें एक्सेस और मैनिपुलेट करने के लिए ऑब्जेक्ट फॉर्मेट में रखना बहुत आसान है। इसके अलावा, HTTP Post और Get क्वेरी स्ट्रिंग केवल घूमने वाले डेटा के लिए एकमात्र प्रारूप नहीं हैं।

— पैट्रिक एम।

एक अच्छा js जो मुझे आया था >> github.com/marioizquierdo/jquery.serializeJSON

— Bongs

Answer 1

serializeArrayपहले से ही ठीक है। आपको बस अपने आवश्यक प्रारूप में डेटा की मालिश करने की आवश्यकता है:

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['name']] = formArray[i]['value'];
  }
  return returnArray;
}

छिपे हुए फ़ील्ड के लिए देखें, जिनका वास्तविक इनपुट के समान नाम है क्योंकि वे अधिलेखित हो जाएंगे।

Comments

के रूप में tvanfosson कहते हैं, दो बार संग्रह पर पुनरावृति क्यों?

— यिश्रोएल

क्या आपका मतलब है "पहले स्थान पर डेटा प्राप्त करने के लिए serializeArray का उपयोग क्यों करें?" क्योंकि serializeArray पहले से ही लिखा है, कई ब्राउज़रों में इकाई परीक्षण किया गया है, और सैद्धांतिक रूप से jQuery के बाद के संस्करणों में सुधार किया जा सकता है। आप जो कम कोड लिखते हैं, उसमें DOM तत्वों की तरह असंगत चीजों को सीधे एक्सेस करना पड़ता है, आपका कोड जितना स्थिर होगा।

— टोबियास कोहेन

चेतावनी दी हो, serializeArray () में अक्षम तत्व शामिल नहीं होंगे। मैं अक्सर इनपुट तत्वों को अक्षम करता हूं जो पृष्ठ पर अन्य तत्वों के साथ सिंक होते हैं, लेकिन मैं अभी भी चाहता हूं कि उन्हें मेरी अनुक्रमित वस्तु में शामिल किया जाए। $.map( $("#container :input"), function(n, i) { /* n.name and $(n).val() */ } );यदि आप अक्षम तत्वों को शामिल करना चाहते हैं, तो आप कुछ का उपयोग करना बेहतर समझते हैं।

— सैमुअल मेचम

@TobiasCohen यह foo[bar]इनपुट इनपुट को अपेक्षित रूप से नहीं संभालता है, अन्य इनपुट नाम किस्मों में से अधिकांश का उल्लेख नहीं करता है। इस समस्या के उथले समाधानों से बहुत निराश होने के बाद, मैंने अपना खुद का jQuery प्लगइन लिखना शुरू कर दिया - इस प्रश्न के उत्तर में विवरण।

— माईटेक

@macek मुझे पता है कि यह कुछ महीने पुराना है, लेकिन जब से सरणियों ने गैर-संख्यात्मक सूचकांक का उपयोग किया है? किसी को इनपुट फू [बार] का नाम नहीं देना चाहिए और इसे एक सरणी के रूप में मानने की उम्मीद करनी चाहिए। क्या आप सरणियों और हैश को भ्रमित कर रहे हैं? हां, [] आमतौर पर एक एक्सेसर के रूप में समझा जाता है, लेकिन केवल सरणियों के लिए नहीं। यह भी कह रहा है कि यह वैध HTML है लेकिन HTML कल्पना में नहीं है एक विरोधाभास है। हां, हो सकता है कि ब्राउज़र उस पर चोक न हो, लेकिन बहुत से वेबसर्वर्स यह जानने के लिए नहीं जा रहे हैं कि वे इस तरह कैसे डिस्क्राइब करें। क्यों? क्योंकि यह HTML कल्पना में नहीं है। इसलिए, यह वास्तव में अमान्य है।

— kroehre

Answer 2

फॉर्म को JSON में बॉस की तरह कन्वर्ट करें

---

वर्तमान स्रोत GitHub और Bower पर है ।

$ bower jquery-serialize-object स्थापित करें

---

निम्न कोड अब हटा दिया गया है ।

निम्नलिखित कोड सभी प्रकार के इनपुट नामों के साथ काम कर सकता है; और उन्हें वैसे ही संभालें जैसे आप अपेक्षा करते हैं।

उदाहरण के लिए:

<!-- All of these will work! -->
<input name="honey[badger]" value="a">
<input name="wombat[]" value="b">
<input name="hello[panda][]" value="c">
<input name="animals[0][name]" value="d">
<input name="animals[0][breed]" value="e">
<input name="crazy[1][][wonky]" value="f">
<input name="dream[as][vividly][as][you][can]" value="g">

// Output
{
  "honey":{
    "badger":"a"
  },
  "wombat":["b"],
  "hello":{
    "panda":["c"]
  },
  "animals":[
    {
      "name":"d",
      "breed":"e"
    }
  ],
  "crazy":[
    null,
    [
      {"wonky":"f"}
    ]
  ],
  "dream":{
    "as":{
      "vividly":{
        "as":{
          "you":{
            "can":"g"
          }
        }
      }
    }
  }
}

प्रयोग

$('#my-form').serializeObject();

सोरसेरी (जावास्क्रिप्ट)

(function($){
    $.fn.serializeObject = function(){

        var self = this,
            json = {},
            push_counters = {},
            patterns = {
                "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
                "key":      /[a-zA-Z0-9_]+|(?=\[\])/g,
                "push":     /^$/,
                "fixed":    /^\d+$/,
                "named":    /^[a-zA-Z0-9_]+$/
            };


        this.build = function(base, key, value){
            base[key] = value;
            return base;
        };

        this.push_counter = function(key){
            if(push_counters[key] === undefined){
                push_counters[key] = 0;
            }
            return push_counters[key]++;
        };

        $.each($(this).serializeArray(), function(){

            // Skip invalid keys
            if(!patterns.validate.test(this.name)){
                return;
            }

            var k,
                keys = this.name.match(patterns.key),
                merge = this.value,
                reverse_key = this.name;

            while((k = keys.pop()) !== undefined){

                // Adjust reverse_key
                reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

                // Push
                if(k.match(patterns.push)){
                    merge = self.build([], self.push_counter(reverse_key), merge);
                }

                // Fixed
                else if(k.match(patterns.fixed)){
                    merge = self.build([], k, merge);
                }

                // Named
                else if(k.match(patterns.named)){
                    merge = self.build({}, k, merge);
                }
            }

            json = $.extend(true, json, merge);
        });

        return json;
    };
})(jQuery);

Comments

तो, यह बहुत अच्छी तरह से काम करता है। लेकिन यह गलत है: यह JSON वापस नहीं करता है, जैसा कि नाम का अर्थ है। इसके बजाय, यह एक वस्तु शाब्दिक देता है। इसके अलावा, hasOwnProperty की जांच करना महत्वपूर्ण है, अन्यथा आपके सरणियों में कुछ भी है जो उनके प्रोटोटाइप से जुड़ा हुआ है, जैसे: {नंबर: ["1", "3", इंडेक्सऑफ: फ़ंक्शन () {...}]}

— frontbbeauty

@frontendbeauty वास्तव में, toJSON बिल्कुल वही है जो कल्पना यह कहती है: developer.mozilla.org/en/JSON#toJSON()_method एक दुर्भाग्यपूर्ण मिथ्या नाम।

— रयान फ्लोरेंस

@ मारेक, मैंने यहाँ jsfiddle पर एक परीक्षण किया । ट्रिक अपने सेलेक्ट का नाम ठीक से रखना है। <select name="foo" multiple="multiple">किसी भी परिदृश्य में काम नहीं करेगा। हालांकि, अगर आप का उपयोग करें [], के रूप में <select name="bar[]" multiple="multiple">, यह सिर्फ ठीक :) काम करेंगे

— Macek

यह बताना चाहते हैं कि github.com/serbanghita/formToObject एक समान जावास्क्रिप्ट विधि है (कोई तीसरी पार्टी लाइब्रेरी की आवश्यकता नहीं है) जो समान कार्य करती है। 'एकाधिक' का समर्थन करता है, 'अक्षम' तत्वों की उपेक्षा करता है।

— सेरन घीचा

यह समाधान शीर्ष पर होना चाहिए क्योंकि यह तत्व नाम के रूप में नेस्टेड कुंजी की समस्या से निपटता है।

— स्क्वायरकट

Answer 3

क्या गलत है:

var data = {};
$(".form-selector").serializeArray().map(function(x){data[x.name] = x.value;}); 

Comments

@LayZee - यदि कुछ भी नहीं चुना गया है, तो आप इसे अपने अंतिम छोर पर क्यों चाहेंगे? यदि आपको विकल्प चुनना है, तो अनुक्रमित करने से पहले इनपुट को मान्य करें।

— दैविक

यदि आप कुछ भी वापस नहीं कर रहे हैं, तो आप .eachइसके बजाय सिर्फ क्यों नहीं उपयोग करते हैं .map??

— अजराफती

यह बहुत सरल है क्योंकि यह सुपर भोला है ... एक ही नाम के साथ चेकबॉक्स नहीं संभालता है। हर बार इससे पहले चेक किए गए आइटम को ओवरराइड करेगा। आपको यह सुनिश्चित करने के लिए निश्चित रूप से कुछ इनपुट प्रकार का पता लगाना होगा कि यह ठीक से क्रमबद्ध है।

— जोशुआ एफ। राउत्री

यदि आप एक शुद्ध jQuery समाधान चाहते हैं, तो आप उपयोग कर सकते हैंvar form = {}; $.each($(this).serializeArray(), function (i, field) { form[field.name] = field.value || ""; });

— tfmontague

$(this).serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})

— साइटें

Answer 4

टोबीस कोहेन के समाधान का एक निश्चित संस्करण। यह सही तरह से 0और जैसे गलत मूल्यों को संभालता है ''।

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [objectData[this.name]];
      }

      objectData[this.name].push(value);
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

और आपकी कोडिंग सुविधा के लिए एक कॉफ़ीस्क्रिप्ट संस्करण:

jQuery.fn.serializeObject = ->
  arrayData = @serializeArray()
  objectData = {}

  $.each arrayData, ->
    if @value?
      value = @value
    else
      value = ''

    if objectData[@name]?
      unless objectData[@name].push
        objectData[@name] = [objectData[@name]]

      objectData[@name].push value
    else
      objectData[@name] = value

  return objectData

Comments

ताबूत में, कि पहले अगर ब्लॉक को छोटा किया जा सकता हैvalue = @value ? ''

— nzifnab

और यदि आप रेल-जैसे रूपों को क्रमबद्ध करने की कोशिश कर रहे हैं, तो आप उत्पन्न की गई कुंजी से तत्व रूट को निकालना चाह सकते हैं। इसे प्राप्त करने के लिए, मैंने एक नया परम keyMapऔर निम्नलिखित पंक्ति जोड़ी है key = if keyMap? then keyMap(@name) else @name:। अब आप जैसे मैपिंग फंक्शन पास कर सकते हैं (name) -> name.match(/\[([^\]]+)]/)[1]। और फिर एक बाद के सभी परिवर्तन करने की आवश्यकता होगी @nameकरने के लिए key, निश्चित रूप से

— दामिर Zekić

@ DamirZekić, यदि आपका मूल तत्व था post, तो आप बस कर सकते थे $('form').serializeObject().post। फैंसी मैपिंग की जरूरत नहीं।

— माकक

@ DamirZekić यह लाइन क्या कर रही है? if (!objectData[this.name].push)??

— किट्टू

@kittu यह जाँच कर रहा objectData[this.name]है कि क्या पुश विधि है (मोटे तौर पर, यह एक सरणी है)। यदि यह एक सरणी है तो यह मान को धक्का देता है, यदि यह एक सरणी नहीं है तो यह इसे एक सरणी में बदल देता है ताकि एक ही कुंजी के साथ कई मान एक सरणी में संयोजित हो जाएं।

— डैनियल एक्स मूर

Answer 5

मुझे Array.prototype.reduceइसका उपयोग करना पसंद है क्योंकि यह एक-लाइनर है, और यह अंडरस्कोर।ज या इस तरह पर निर्भर नहीं करता है :

$('#formid').serializeArray()
    .reduce(function(a, x) { a[x.name] = x.value; return a; }, {});

यह उत्तर का उपयोग करने के समान है Array.prototype.map, लेकिन आपको एक अतिरिक्त ऑब्जेक्ट चर के साथ अपने दायरे को अव्यवस्थित करने की आवश्यकता नहीं है। एक स्थान पर खरीदारी।

महत्वपूर्ण नोट : डुप्लिकेट nameविशेषताएँ वाले इनपुट्स वाले प्रपत्र मान्य HTML हैं, और वास्तव में एक सामान्य दृष्टिकोण है। इस थ्रेड में किसी भी उत्तर का उपयोग करना उस स्थिति में अनुचित होगा (चूंकि ऑब्जेक्ट कुंजी अद्वितीय होनी चाहिए)।

Comments

यह काफी सुरुचिपूर्ण है। लेकिन यह ध्यान देने योग्य है कि array.prototype.reduce()IE8 में उपलब्ध नहीं है क्योंकि यह ECMAScript 5 विनिर्देश का हिस्सा है। इसलिए यदि आपको IE8 समर्थन की आवश्यकता है, तो आप पूरी तरह से पॉलीफ़िल या किसी अन्य समाधान का उपयोग करना चाहते हैं।

— गुफलाम

सच है, लेकिन यह पॉलीफिल के लिए काफी आसान है। इसके अलावा, IE8 सिरदर्द लगभग खत्म हो गया है, IE11 एंटरप्राइज मोड के साथ माइक्रोसॉफ्ट के महान काम के लिए - मैं अब IE8 के साथ व्यक्तिगत उपयोगकर्ताओं को पूरा नहीं करता हूं, लेकिन जब 10,000 कर्मचारियों वाला एक संगठन जो सभी IE8 का उपयोग करता है ... वह अलग है। सौभाग्य से, Microsoft उस समस्या पर कड़ी मेहनत कर रहा है।

— एथन ब्राउन

वैसे आपको अपने IT लोगों को IE11 एंटरप्राइज मोड में देखना चाहिए - यह एक आधुनिक ब्राउज़र प्रदान करता है और IE8- संगत ऐप चलाने का एक तरीका है। Microsoft के भाग पर स्मार्ट चाल: howtogeek.com/184634/…

— Ethan Brown

Answer 6

ये सभी जवाब मुझे ऊपर से बहुत अच्छे लग रहे थे। सादगी के लिए कुछ कहा जाना चाहिए। जब तक आपके सभी फॉर्म इनपुट में नाम की विशेषता है, तब तक यह सिर्फ जिमी बांका काम करना चाहिए।

$('form.myform').submit(function () {
  var $this = $(this)
    , viewArr = $this.serializeArray()
    , view = {};

  for (var i in viewArr) {
    view[viewArr[i].name] = viewArr[i].value;
  }

  //Do stuff with view object here (e.g. JSON.stringify?)
});

Comments

हालाँकि, नेस्टेड फॉर्म डेटा को हैंडल नहीं करता है, इस कारण उत्तर अधिक जटिल हो जाते हैं।

— frontendbeauty

मेरे लिए बहुत अच्छा काम किया। बस कुंजी-मूल्य जोड़े के भंडारण की आवश्यकता है; स्ट्रिंगिंग और फिर लोकलस्टोरेज या कुकी को सहेजना सिर्फ बांका काम करता है।

— ग्रेग पेटिट

Answer 7

प्रत्येक तत्व की जांच के बिना वास्तव में ऐसा करने का कोई तरीका नहीं है। क्या आप वास्तव में जानना चाहते हैं "क्या किसी और ने पहले से ही एक विधि लिखी है जो एक फॉर्म को JSON ऑब्जेक्ट में परिवर्तित करता है?" निम्नलिखित की तरह कुछ काम करना चाहिए - ध्यान दें कि यह आपको केवल उन तत्वों को देगा जो एक POST के माध्यम से लौटाए जाएंगे (एक नाम होना चाहिए)। यह परीक्षण नहीं किया गया है ।

function formToJSON( selector )
{
     var form = {};
     $(selector).find(':input[name]:enabled').each( function() {
         var self = $(this);
         var name = self.attr('name');
         if (form[name]) {
            form[name] = form[name] + ',' + self.val();
         }
         else {
            form[name] = self.val();
         }
     });

     return form;
}

Comments

सच है, मुझे एक प्लगइन पसंद आएगा जो मेरे लिए ऐसा करेगा। नाम रखने की सीमा कोई बड़ी बात नहीं है। क्या यह टेक्स्टारैस और चयन सहित सभी क्षेत्रों को एक रूप में खींच लेगा?

— यिसरोएल

सुनिश्चित नहीं हैं कि आप [विकलांग] का हिसाब चाहते हैं, लेकिन मुझे नहीं लगता कि इसे भेजा / उठाया जाना चाहिए।

— पदक विजेता जूल

नक्शा प्राप्त करने के लिए serializeArray () का उपयोग करना आसान हो सकता है, और फिर इसे एक सामान्य JSON ऑब्जेक्ट में परिवर्तित करने के लिए ऊपर दिए गए कोड का उपयोग कर सकते हैं, इस तरह से मैं स्वयं फॉर्म के साथ काम नहीं कर रहा हूं

— Yisroel

SerializedArray का उपयोग करना काम करेगा, लेकिन अनिवार्य रूप से आप दो बार संग्रह पर पुनरावृत्ति करेंगे - एक बार सरणी का उत्पादन करने के लिए, फिर सरणी पर। मुझे उस की आवश्यकता नहीं दिख रही है।

— टवनफॉसन

मैं सक्षम / अक्षम के लिए चयनकर्ता को समायोजित करूँगा।

— तवानफोसन

Answer 8

यदि आप अंडरस्कोर का उपयोग कर रहे हैं। तो आप अपेक्षाकृत संक्षिप्त उपयोग कर सकते हैं:

_.object(_.map($('#myform').serializeArray(), _.values))

Answer 9

मैंने जाँच की कि अन्य सभी उत्तरों के साथ एक समस्या है, कि यदि इनपुट नाम एक सरणी के रूप में है name[key], जैसे कि , तो इसे इस तरह से उत्पन्न किया जाना चाहिए:

name:{ key : value }

---

उदाहरण के लिए: यदि आपके पास नीचे के समान HTML फॉर्म है:

<form>
    <input name="name" value="value" >
    <input name="name1[key1]" value="value1" >
    <input name="name2[key2]" value="value2" >
    <input name="name3[key3]" value="value3" >
</form>

लेकिन इसे नीचे दिए गए JSON की तरह ही जेनरेट किया जाना चाहिए, और अन्य सभी उत्तरों के साथ निम्नलिखित की तरह ऑब्जेक्ट नहीं बनता है। इसलिए अगर कोई भी निम्नलिखित JSON जैसी कोई चीज़ लाना चाहता है, तो नीचे दिए गए JS कोड को आज़माएं।

{
    name  : 'value',
    name1 : { key1 : 'value1' },
    name2 : { key2 : 'value2' },
    name3 : { key2 : 'value2' }
}

$.fn.getForm2obj = function() {
  var _ = {};
  $.map(this.serializeArray(), function(n) {
    const keys = n.name.match(/[a-zA-Z0-9_]+|(?=\[\])/g);
    if (keys.length > 1) {
      let tmp = _;
      pop = keys.pop();
      for (let i = 0; i < keys.length, j = keys[i]; i++) {
        tmp[j] = (!tmp[j] ? (pop == '') ? [] : {} : tmp[j]), tmp = tmp[j];
      }
      if (pop == '') tmp = (!Array.isArray(tmp) ? [] : tmp), tmp.push(n.value);
      else tmp[pop] = n.value;
    } else _[keys.pop()] = n.value;
  });
  return _;
}
console.log($('form').getForm2obj());
$('form input').change(function() {
  console.clear();
  console.log($('form').getForm2obj());
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<form>
  <input name="name" value="value">
  <input type="checkbox" name="name1[]" value="1" checked="checked">1
  <input type="checkbox" name="name1[]" value="2">2
  <input type="checkbox" name="name1[]" value="3">3<br>
  <input type="radio" name="gender" value="male" checked="checked">male
  <input type="radio" name="gender" value="female"> female
  <input name="name2[key1]" value="value1">
  <input name="one[another][another_one]" value="value4">
  <input name="name3[1][name]" value="value4">
  <input name="name3[2][name]" value="value4">
  <input name="[]" value="value5">
</form>

Comments

इस उत्तर को कवर मामले का उल्लेख करता है, लेकिन यह चेकबॉक्स तरह के मामलों [] या यहां तक कि एक [एक और] [another_one] को कवर नहीं करता

— लियोनार्डो बील

@LeardoardoBeal मैं अपने ans को ठीक करता हूं .. अब यह जांचें ..!

— भाविक हिरानी

मैं नीच हूं और मैंने नीचा evalदिखाया क्योंकि इस तरह से इस्तेमाल नहीं किया जाना चाहिए eval, क्योंकि जब इस तरह से उपयोग किया जाता है, तो बहुत अविश्वसनीय, छोटी गाड़ी, गलत प्रदर्शन और संभावित असुरक्षित प्रथाओं को बढ़ावा देता है।

— जैक गिफिन

मैं सहमत नहीं हूँ यह एक अच्छा जवाब है। और कृपया जब आप उत्तर लिखते हैं तो अपना कोड स्व-व्याख्यात्मक बनाते हैं या उसे समझाते हैं। this.c = function(k,v){ eval("c = typeof "+k+";"); if(c == 'undefined') _t.b(k,v);}संक्षिप्त रूप से व्याख्यात्मक नहीं है। कम अनुभव वाला एक देवता इस बात को समझे बिना कि यह क्यों और कैसे काम करता है, की नकल करेगा।

— 9

@JackGiffin अब अपना नया कोड देखें क्योंकि मैंने eval()अपना कोड हटा दिया है।

— भाविक हिरानी

Answer 10

ठीक है, मुझे पता है कि यह पहले से ही एक उच्च उत्थान का जवाब है, लेकिन हाल ही में इसी तरह का एक और सवाल पूछा गया था , और मुझे इस प्रश्न के लिए भी निर्देशित किया गया था। मैं अपना समाधान भी प्रस्तुत करना चाहता हूं, क्योंकि यह स्वीकृत समाधान पर एक लाभ प्रदान करता है: आप अक्षम रूप तत्वों को शामिल कर सकते हैं (जो कि कभी-कभी महत्वपूर्ण होता है, आपके यूआई कार्यों के आधार पर)

यहाँ अन्य SO प्रश्न से मेरा उत्तर है :

प्रारंभ में, हम jQuery की serializeArray()विधि का उपयोग कर रहे थे , लेकिन इसमें ऐसे तत्व शामिल नहीं हैं जो अक्षम हैं। हम अक्सर ऐसे तत्वों को निष्क्रिय कर देते हैं जो पृष्ठ पर अन्य स्रोतों के लिए "समन्वयन" होते हैं, लेकिन हमें अभी भी अपने क्रमबद्ध ऑब्जेक्ट में डेटा को शामिल करना होगा। तो serializeArray()बाहर है। हमने :inputकिसी दिए गए कंटेनर में सभी इनपुट तत्वों (सक्षम और अक्षम दोनों) को प्राप्त करने के लिए चयनकर्ता का उपयोग किया , और फिर $.map()अपनी वस्तु बनाने के लिए।

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

ध्यान दें कि इस काम के लिए, आपके प्रत्येक इनपुट को एक nameविशेषता की आवश्यकता होगी , जो परिणामी वस्तु की संपत्ति का नाम होगा।

यह वास्तव में हम क्या इस्तेमाल से थोड़ा संशोधित है। हमें एक ऐसी वस्तु बनाने की ज़रूरत थी जो .NET IDEDIA के रूप में संरचित थी, इसलिए हमने इसका उपयोग किया: (यदि यह उपयोगी है तो मैं इसे यहाँ प्रदान करता हूँ)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

मैं इन दोनों समाधानों को पसंद करता हूं, क्योंकि वे $.map()फ़ंक्शन के सरल उपयोग हैं , और आपके चयनकर्ता पर आपका पूरा नियंत्रण है (इसलिए, आपके परिणामी वस्तु में कौन से तत्व शामिल हैं)। इसके अलावा, कोई अतिरिक्त प्लगइन की आवश्यकता नहीं है। सादा पुराना jQuery।

Comments

मैंने एक परियोजना में यह कोशिश की, इस mapतरह का उपयोग करना एक एकल संपत्ति के साथ वस्तुओं की एक सरणी बनाता है, यह सभी वस्तुओं को एक वस्तु में नहीं ढहाता है।

— joshperry

Answer 11

इस फ़ंक्शन को एक ही नाम के साथ कई तत्वों के साथ बहुआयामी सरणियों को संभालना चाहिए।

मैं कुछ वर्षों से इसका उपयोग कर रहा हूं:

jQuery.fn.serializeJSON=function() {
  var json = {};
  jQuery.map(jQuery(this).serializeArray(), function(n, i) {
    var _ = n.name.indexOf('[');
    if (_ > -1) {
      var o = json;
      _name = n.name.replace(/\]/gi, '').split('[');
      for (var i=0, len=_name.length; i<len; i++) {
        if (i == len-1) {
          if (o[_name[i]]) {
            if (typeof o[_name[i]] == 'string') {
              o[_name[i]] = [o[_name[i]]];
            }
            o[_name[i]].push(n.value);
          }
          else o[_name[i]] = n.value || '';
        }
        else o = o[_name[i]] = o[_name[i]] || {};
      }
    }
    else {
      if (json[n.name] !== undefined) {
        if (!json[n.name].push) {
          json[n.name] = [json[n.name]];
        }
        json[n.name].push(n.value || '');
      }
      else json[n.name] = n.value || '';      
    }
  });
  return json;
};

Answer 12

तुम यह केर सकते हो:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeArray());

JSON देखें ।

Answer 13

वन-लाइनर (jQuery के अलावा कोई अन्य निर्भरता नहीं), mapविधि के लिए पास किए गए फ़ंक्शन के लिए निश्चित ऑब्जेक्ट बाइंडिंग का उपयोग करता है ।

$('form').serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0]

यह क्या करता है?

"id=2&value=1&comment=ok" => Object { id: "2", value: "1", comment: "ok" }

प्रगतिशील वेब ऐप्स के लिए उपयुक्त (कोई भी नियमित रूप से सबमिट एक्शन और ऐजैक्स अनुरोध दोनों का समर्थन कर सकता है)

Answer 14

उपयोग:

function form_to_json (selector) {
  var ary = $(selector).serializeArray();
  var obj = {};
  for (var a = 0; a < ary.length; a++) obj[ary[a].name] = ary[a].value;
  return obj;
}

आउटपुट:

{"myfield": "myfield value", "passwordfield": "mypasswordvalue"}

Answer 15

सादगी यहां सबसे अच्छी है। मैंने एक साधारण स्ट्रिंग को एक नियमित अभिव्यक्ति के साथ बदल दिया है, और उन्होंने इस प्रकार एक आकर्षण की तरह काम किया है। मैं एक नियमित अभिव्यक्ति विशेषज्ञ नहीं हूं, लेकिन मुझे यकीन है कि आप बहुत जटिल वस्तुओं को भी आबाद कर सकते हैं।

var values = $(this).serialize(),
attributes = {};

values.replace(/([^&]+)=([^&]*)/g, function (match, name, value) {
    attributes[name] = value;
});

Answer 16

कुछ पुराने उत्तर से:

$('form input, form select').toArray().reduce(function(m,e){m[e.name] = $(e).val(); return m;},{})

Comments

मैं जो बता सकता हूं, वह अंतर यह है कि आपका समाधान इस बात पर निर्भर नहीं करता है कि serializeArrayआपको जो भी इनपुट चाहिए, उसे चुनने की स्वतंत्रता है (उदाहरण के लिए, आप अक्षम इनपुट शामिल कर सकते हैं), सही? यानी यह किसी भी रूप या जमा घटना के लिए युग्मित नहीं है, यह केवल अपने आप से स्वतंत्र है?

— प्रातः

लिंक किए गए उत्तर के साथ एकमात्र छोटा अंतर यह है कि reduceऑब्जेक्ट को इंस्टेंट करने के लिए आवश्यक कोई डेटा नहीं है, ऑब्जेक्ट लौटाता है। यह स्वतंत्र नहीं है क्योंकि toArrayjQuery से है।

— साइटें

Answer 17

मुझे टोबियास कोहेन कोड के साथ एक समस्या मिली (मेरे पास इस पर सीधे टिप्पणी करने के लिए पर्याप्त बिंदु नहीं हैं), जो अन्यथा मेरे लिए काम करता है। यदि आपके पास एक ही नाम के साथ दो चुनिंदा विकल्प हैं, तो दोनों मूल्य = "" के साथ, मूल कोड "नाम" के बजाय "नाम": "" "" "" का उत्पादन करेगा।

मुझे लगता है कि यह पहली "शर्त" जोड़कर तय किया जा सकता है।

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] || o[this.name] == '') {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

Answer 18

Maček के समाधान का उपयोग करते हुए , मैंने ASP.NET MVC को उसी तरह से उनके नेस्टेड / कॉम्प्लेक्स ऑब्जेक्ट को संभालने के तरीके के साथ काम करने के लिए इसे संशोधित किया। आपको बस इतना करना है कि मान्य टुकड़े को संशोधित करें:

"validate": /^[a-zA-Z][a-zA-Z0-9_]*((?:\[(?:\d*|[a-zA-Z0-9_]+)\])*(?:\.)[a-zA-Z][a-zA-Z0-9_]*)*$/,

यह मिलान करेगा और फिर नाम के साथ तत्वों को सही ढंग से मैप करेगा जैसे:

<input type="text" name="zooName" />

तथा

<input type="text" name="zooAnimals[0].name" />

Answer 19

इस समस्या के लिए मैंने पाया गया सबसे सरल और सटीक तरीका bbq प्लगइन या यह एक (जो कि लगभग 0.5K बाइट्स आकार है) का उपयोग करना था।

यह बहुआयामी सरणियों के साथ भी काम करता है।

$.fn.serializeObject = function()
{
	return $.deparam(this.serialize());
};

Comments

यह अच्छी तरह से काम करने लगता है। नहीं है jQuery-deparam के लिए एक वैकल्पिक रिपॉजिटरी कि बोवर और NPM की वर्णन फ़ाइलें भी शामिल है।

— अल्फ ईटन

Answer 20

JQuery, jquery.serializeJSON के लिए बस इतना करने के लिए एक प्लगइन है । मैंने अब कुछ परियोजनाओं पर इसका सफलतापूर्वक उपयोग किया है। यह एक सम्मोहन की तरह काम करता है।

Answer 21

const formData = new FormData(form);

let formDataJSON = {};

for (const [key, value] of formData.entries()) {

    formDataJSON[key] = value;
}

Answer 22

मैं इस दृष्टिकोण को पसंद करता हूं क्योंकि: आपको 2 से अधिक संग्रहों को पुनरावृत्त करना नहीं है, यदि आपको आवश्यकता है, तो आप "नाम" और "मूल्य" के अलावा अन्य चीजों पर प्राप्त कर सकते हैं, और ऑब्जेक्ट में संग्रहीत करने से पहले आप अपने मूल्यों को पवित्र कर सकते हैं ( यदि आपके पास डिफ़ॉल्ट मान हैं जिन्हें आप स्टोर नहीं करना चाहते हैं, उदाहरण के लिए)।

$.formObject = function($o) {
    var o = {},
        real_value = function($field) {
            var val = $field.val() || "";

            // additional cleaning here, if needed

            return val;
        };

    if (typeof o != "object") {
        $o = $(o);
    }

    $(":input[name]", $o).each(function(i, field) {
        var $field = $(field),
            name = $field.attr("name"),
            value = real_value($field);

        if (o[name]) {
            if (!$.isArray(o[name])) {
                o[name] = [o[name]];
            }

            o[name].push(value);
        }

        else {
            o[name] = value;
        }
    });

    return o;
}

ऐसे उपयोग करें:

var obj = $.formObject($("#someForm"));

केवल फ़ायरफ़ॉक्स में परीक्षण किया गया।

Answer 23

एक वस्तु में कुछ भी मोड़ो (इकाई परीक्षण नहीं)

<script type="text/javascript">
string = {};

string.repeat = function(string, count)
{
    return new Array(count+1).join(string);
}

string.count = function(string)
{
    var count = 0;

    for (var i=1; i<arguments.length; i++)
    {
        var results = string.match(new RegExp(arguments[i], 'g'));
        count += results ? results.length : 0;
    }

    return count;
}

array = {};

array.merge = function(arr1, arr2)
{
    for (var i in arr2)
    {
        if (arr1[i] && typeof arr1[i] == 'object' && typeof arr2[i] == 'object')
            arr1[i] = array.merge(arr1[i], arr2[i]);
        else
            arr1[i] = arr2[i]
    }

    return arr1;
}

array.print = function(obj)
{
    var arr = [];
    $.each(obj, function(key, val) {
        var next = key + ": ";
        next += $.isPlainObject(val) ? array.print(val) : val;
        arr.push( next );
      });

    return "{ " +  arr.join(", ") + " }";
}

node = {};

node.objectify = function(node, params)
{
    if (!params)
        params = {};

    if (!params.selector)
        params.selector = "*";

    if (!params.key)
        params.key = "name";

    if (!params.value)
        params.value = "value";

    var o = {};
    var indexes = {};

    $(node).find(params.selector+"["+params.key+"]").each(function()
    {
        var name = $(this).attr(params.key),
            value = $(this).attr(params.value);

        var obj = $.parseJSON("{"+name.replace(/([^\[]*)/, function()
        {
            return '"'+arguments[1]+'"';
        }).replace(/\[(.*?)\]/gi, function()
        {
            if (arguments[1].length == 0)
            {
                var index = arguments[3].substring(0, arguments[2]);
                indexes[index] = indexes[index] !== undefined ? indexes[index]+1 : 0;

                return ':{"'+indexes[index]+'"';
            }
            else
                return ':{"'+escape(arguments[1])+'"';
        })+':"'+value.replace(/[\\"]/gi, function()
        {
            return "\\"+arguments[0]; 
        })+'"'+string.repeat('}', string.count(name, ']'))+"}");

        o = array.merge(o, obj);
    });

    return o;
}
</script>

परीक्षण का उत्पादन:

$(document).ready(function()
{
    console.log(array.print(node.objectify($("form"), {})));
    console.log(array.print(node.objectify($("form"), {selector: "select"})));
});

पर

<form>
    <input name='input[a]' type='text' value='text'/>
    <select name='input[b]'>
        <option>select</option>
    </select>

    <input name='otherinput[c][a]' value='a'/>
    <input name='otherinput[c][]' value='b'/>
    <input name='otherinput[d][b]' value='c'/>
    <input name='otherinput[c][]' value='d'/>

    <input type='hidden' name='anotherinput' value='hidden'/>
    <input type='hidden' name='anotherinput' value='1'/>

    <input type='submit' value='submit'/>
</form>

निकलेगा:

{ input: { a: text, b: select }, otherinput: { c: { a: a, 0: b, 1: d }, d: { b: c } }, anotherinput: 1 }
{ input: { b: select } }

Answer 24

मुझे चयनित समाधान के साथ एक समस्या मिली।

जब सरणी आधारित नाम jQuery serializeArray () फ़ंक्शन का उपयोग करते हैं तो फ़ंक्शन वास्तव में मर जाता है।

मेरे पास एक PHP फ्रेमवर्क है जो एक ही फॉर्म को कई बार एक ही पेज पर एक से अधिक व्यू में डालने की अनुमति देने के लिए सरणी-आधारित फ़ील्ड नामों का उपयोग करता है। यह परस्पर विरोधी फ़ॉर्म मॉडल के बिना एक ही पृष्ठ पर दोनों ऐड, एडिट और डिलीट करने के लिए आसान हो सकता है।

चूँकि मैं इस पूर्ण आधार कार्यक्षमता को लेने के बिना रूपों को क्रमबद्ध करना चाहता था, इसलिए मैंने अपना स्वयं का सीरलाइज़ लिखने का फैसला किया।

        var $vals = {};

        $("#video_edit_form input").each(function(i){
            var name = $(this).attr("name").replace(/editSingleForm\[/i, '');

            name = name.replace(/\]/i, '');

            switch($(this).attr("type")){
                case "text":
                    $vals[name] = $(this).val();
                    break;
                case "checkbox":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                case "radio":
                    if($(this).attr("checked")){
                        $vals[name] = $(this).val();
                    }
                    break;
                default:
                    break;
            }
        });

कृपया ध्यान दें: यह फॉर्म सबमिट के बाहर भी काम करता है (इसलिए यदि आपके कोड के बाकी हिस्सों में कोई त्रुटि होती है तो फॉर्म सबमिट नहीं होगा यदि आप लिंक बटन पर "परिवर्तन सहेजें" कहते हैं।

यह भी ध्यान दें कि इस फ़ंक्शन का उपयोग केवल सत्यापन के लिए सर्वर-साइड पर भेजने के लिए डेटा को इकट्ठा करने के लिए फॉर्म को मान्य करने के लिए कभी नहीं किया जाना चाहिए। इस तरह के कमजोर और बड़े पैमाने पर आवंटित कोड का उपयोग करना XSS , आदि का कारण होगा ।

Answer 25

मैं हाल ही में एक ही समस्या थी और इस .toJSON jQuery प्लगइन के साथ बाहर आया था जो एक संरचना के साथ एक JSON ऑब्जेक्ट में रूपांतरित करता है। यह गतिशील रूप से उत्पन्न रूपों के लिए भी स्पष्ट रूप से उपयोगी है जहां आप अपने उपयोगकर्ता को विशिष्ट स्थानों में अधिक फ़ील्ड जोड़ने देना चाहते हैं।

मुद्दा यह है कि आप वास्तव में एक फॉर्म का निर्माण करना चाहते हैं, ताकि इसकी एक संरचना स्वयं हो, इसलिए मान लें कि आप एक ऐसा फॉर्म बनाना चाहते हैं जहां उपयोगकर्ता शहर में अपने पसंदीदा स्थानों को सम्मिलित करता है: आप इस फॉर्म की कल्पना कर सकते हैं कि <places>...</places>XML तत्व का प्रतिनिधित्व करने वाला एक स्थानों की सूची उपयोगकर्ता इस प्रकार पसंद करता है <place>...</place>तत्वों की एक सूची उदाहरण के लिए एक <name>...</name>तत्व, एक <type>...</type>तत्व और फिर <activity>...</activity>तत्वों की एक सूची है जो आप ऐसी जगह पर प्रदर्शन कर सकते हैं। तो आपका XML स्ट्रक्चर इस तरह होगा:

<places>

    <place>

        <name>Home</name>
        <type>dwelling</type>

        <activity>sleep</activity>
        <activity>eat</activity>
        <activity>watch TV</activity>

    </place>

    <place>...</place>

    <place>...</place>

</places>

इसमें से JSON ऑब्जेक्ट कितना शांत होगा जो इस सटीक संरचना का प्रतिनिधित्व करेगा ताकि आप या तो कर पाएंगे:

• इस ऑब्जेक्ट को स्टोर करें क्योंकि यह किसी भी CouchDB- समान डेटाबेस में है
• इसे अपने $ _POST [] सर्वर साइड से पढ़ें और एक सही ढंग से नेस्टेड सरणी को फिर से बनाएं जिसे आप शब्दार्थ रूप से जोड़-तोड़ कर सकते हैं
• इसे अच्छी तरह से बनाई गई XML फ़ाइल में बदलने के लिए कुछ सर्वर-साइड स्क्रिप्ट का उपयोग करें (भले ही आपको इसकी सटीक संरचना ए-प्राथमिकता न पता हो)
• बस किसी भी तरह से इसका उपयोग किसी भी Node.js तरह सर्वर स्क्रिप्ट में है

ठीक है, इसलिए अब हमें यह सोचने की आवश्यकता है कि कोई प्रपत्र XML फ़ाइल का प्रतिनिधित्व कैसे कर सकता है।

बेशक <form>टैग यह है root, लेकिन फिर हमारे पास वह <place>तत्व है जो एक कंटेनर है और डेटा तत्व नहीं है, इसलिए हम इसके लिए इनपुट टैग का उपयोग नहीं कर सकते हैं।

यहाँ जहाँ <fieldset>टैग काम में आता है! हम <fieldset>अपने फ़ॉर्म / XML प्रतिनिधित्व में सभी कंटेनर तत्वों का प्रतिनिधित्व करने के लिए टैग का उपयोग करेंगे और इस तरह से परिणाम प्राप्त करेंगे:

<form name="places">

    <fieldset name="place">

        <input type="text" name="name"/>
        <select name="type">
            <option value="dwelling">Dwelling</option>
            <option value="restoration">Restoration</option>
            <option value="sport">Sport</option>
            <option value="administrative">Administrative</option>
        </select>

        <input type="text" name="activity"/>
        <input type="text" name="activity"/>
        <input type="text" name="activity"/>

    </fieldset>

</form>

जैसा कि आप इस रूप में देख सकते हैं, हम अनूठे नामों का नियम तोड़ रहे हैं, लेकिन यह ठीक है क्योंकि वे तत्व के एक सरणी में परिवर्तित हो जाएंगे और इस प्रकार उन्हें केवल सरणी के अंदर उनके सूचकांक द्वारा संदर्भित किया जाएगा।

इस बिंदु पर आप देख सकते हैं कि name="array[]"फॉर्म के अंदर कोई नाम नहीं है और सब कुछ सुंदर, सरल और अर्थपूर्ण है।

अब हम चाहते हैं कि यह फॉर्म JSON ऑब्जेक्ट में परिवर्तित हो जाए जो इस तरह दिखाई देगा:

{'places':{

    'place':[

        {

            'name': 'Home',
            'type': 'dwelling',

            'activity':[

                 'sleep',
                 'eat',
                 'watch TV'

            ]

        },

        {...},

        {...}

    ]

}}

ऐसा करने के लिए मैंने इस jQuery प्लगइन को यहाँ विकसित किया है जो किसी ने इस कोड समीक्षा धागे में अनुकूलन करने में मदद की और इस तरह दिखता है:

$.fn.toJSO = function () {
    var obj = {},
        $kids = $(this).children('[name]');
    if (!$kids.length) {
        return $(this).val();
    }
    $kids.each(function () {
        var $el = $(this),
            name = $el.attr('name');
        if ($el.siblings("[name=" + name + "]").length) {
            if (!/radio|checkbox/i.test($el.attr('type')) || $el.prop('checked')) {
                obj[name] = obj[name] || [];
                obj[name].push($el.toJSO());
            }
        } else {
            obj[name] = $el.toJSO();
        }
    });
    return obj;
};

मैंने इसे और अधिक समझाने के लिए यह एक ब्लॉग पोस्ट भी बनाया ।

यह JSON (यहां तक ​​कि रेडियो और चेक बॉक्स) के रूप में सब कुछ धर्मान्तरित करता है और आपके पास जो कुछ करना बाकी है वह कॉल है

$.post('script.php',('form').toJSO(), ...);

मुझे पता है कि JSON ऑब्जेक्ट्स में फ़ॉर्म बदलने .serialize()और .serializeArray()अधिकांश मामलों में निश्चित रूप से काम करने के लिए बहुत सारे तरीके हैं और ज्यादातर उपयोग किए जाने का इरादा है, लेकिन मुझे लगता है कि यह एक फॉर्म को XML नाम के रूप में लिखने का यह पूरा विचार सार्थक नामों के साथ और इसे एक में परिवर्तित करना है। अच्छी तरह से बनाई गई JSON ऑब्जेक्ट कोशिश के लायक है, यह भी कि आप बिना किसी चिंता के समान-नाम इनपुट टैग जोड़ सकते हैं, यदि आपको गतिशील रूप से उत्पन्न प्रपत्र डेटा को पुनः प्राप्त करने की आवश्यकता है।

मुझे उम्मीद है इससे किसी को सहायता मिलेगी!

Comments

तुम क्या करने की कोशिश कर रहे हो?

— ओनेहोरन

Answer 26

मैंने उत्पादन में इसका उपयोग करने के लिए स्वयं को एक बहुआयामी जावास्क्रिप्ट ऑब्जेक्ट के रूप में कोडित किया। परिणाम https://github.com/serbanghita/formToObject.js है ।

Comments

मैंने एक बहुत ही विशिष्ट कार्यान्वयन के लिए इस भिन्नता का उपयोग किया, बहुत बहुत धन्यवाद!

— क्रिस बेकर

मुझे यह बताने के लिए धन्यवाद कि यह उपयोगी है। मेरे पास रोल करने के लिए कुछ आने वाली विशेषताएं हैं और यह मुझे प्रेरित करता है।

— रबांन घी

Answer 27

एक और जवाब

document.addEventListener("DOMContentLoaded", function() {
  setInterval(function() {
    var form = document.getElementById('form') || document.querySelector('form[name="userprofile"]');
    var json = Array.from(new FormData(form)).map(function(e,i) {this[e[0]]=e[1]; return this;}.bind({}))[0];
    
    console.log(json)
    document.querySelector('#asJSON').value = JSON.stringify(json);
  }, 1000);
})

<form name="userprofile" id="form">
  <p>Name <input type="text" name="firstname" value="John"/></p>
  <p>Family name <input name="lastname" value="Smith"/></p>
  <p>Work <input name="employment[name]" value="inc, Inc."/></p>
  <p>Works since <input name="employment[since]" value="2017" /></p>
  <p>Photo <input type="file" /></p>
  <p>Send <input type="submit" /></p>
</form>

JSON: <textarea id="asJSON"></textarea>

फॉर्मडाटा: https://developer.mozilla.org/en-US/docs/Web/API/FormData

Answer 28

[अद्यतन २०२०]

वेनिला js में एक साधारण ऑनलाइनर के साथ:

Object.fromEntries(new FormData(form))

Answer 29

मुझे samuels संस्करण पसंद है, लेकिन मेरा मानना ​​है कि इसमें एक छोटी सी त्रुटि है। आम तौर पर JSON के रूप में भेजा जाता है

{ "CoreSKU": "PCGUYJS", "name_de": "जो कुछ भी", ...

के रूप में नहीं

[{ "CoreSKU": "PCGUYJS"}, { "name_de": "जो कुछ भी"}, ...

इसलिए फ़ंक्शन IMO को पढ़ना चाहिए:

App.toJson = function( selector ) {
    var o = {};
    $.map( $( selector ), function( n,i )
    {
        o[n.name] = $(n).val();
    });     
    return o;
}

और इसे डेटा सरणी में लपेटने के लिए (जैसा कि आमतौर पर अपेक्षित है, भी), और अंत में इसे astring App.stringify ({डेटा: App.toJson ('#cropform: input')} के रूप में भेजें)

प्रत्येक संस्करण के लिए कवर किए गए संस्करण के लिए json2.js पर दुबले संस्करण के लिए प्रश्न 3593046 को देखें । यह सब कवर करना चाहिए :)

Comments

धन्यवाद .. यह बनाता है (जैसा कि आपने उल्लेख किया है) छोटे लेकिन बहुत महत्वपूर्ण अंतर।

— आदर्श

Answer 30

एक त्वरित, आधुनिक समाधान के लिए, JSONify jQuery प्लगइन का उपयोग करें । नीचे दिए गए उदाहरण को GitHub README से शब्दशः लिया गया है। प्लगइन के लेखक कुशाल पंड्या को सभी श्रेय।

दिया हुआ:

<form id="myform">
    <label>Name:</label>
    <input type="text" name="name"/>
    <label>Email</label>
    <input type="text" name="email"/>
    <label>Password</label>
    <input type="password" name="password"/>
</form>

चल रहा है:

$('#myform').jsonify();

पैदा करता है:

{"name":"Joe User","email":"[e-mail]","password":"mypass"}

यदि आप इस JSON ऑब्जेक्ट के साथ एक jQuery POST करना चाहते हैं:

$('#mybutton').click(function() {
    $.post('/api/user', JSON.stringify($('#myform').jsonify()));
}