JQuery Ajax फ़ंक्शन में डेटा के रूप में पूरे फ़ॉर्म को पास करें

Question

मेरे पास एक jQuery ajax फ़ंक्शन है और पोस्ट डेटा के रूप में एक संपूर्ण फ़ॉर्म सबमिट करना चाहता हूं। हम लगातार फॉर्म को अपडेट कर रहे हैं, इसलिए फॉर्म के इनपुट को लगातार अपडेट करना थकाऊ हो जाता है जिसे अनुरोध में भेजा जाना चाहिए।

Comments

प्रपत्र () और छवियों के बारे में मोह सही है। लेकिन आगे स्पष्ट करने के लिए। यह है कि धारावाहिक केवल स्ट्रिंग्स (बाइनरी डेटा नहीं) पर काम करता है। FormData () फ़ंक्शन उन रूपों के साथ काम करता है जिनके पास एन्कोडिंग प्रकार "मल्टीपार्ट / फॉर्म-डेटा" पर सेट है। यहाँ विवरण: developer.mozilla.org/en-US/docs/Web/API/FormData

— james kenny

Answer 1

एक फ़ंक्शन है जो वास्तव में ऐसा करता है:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);

Comments

$ .post भी सफलता पर एक फ़ंक्शन कह सकता है। $ .post ('url', data, function () {....});

— SLM

ध्यान दें: फॉर्म फ़ील्ड में नाम विशेषता सेट होना चाहिए, केवल ID का उपयोग करने से दस्तावेज के रूप में काम नहीं करता है और जैसा कि मैंने पहले हाथ पाया था।

— लांस क्लीवलैंड

मुझे इसी नाम के साथ कुछ इनपुट की क्या आवश्यकता है ? मेरा मतलब है, उन्हें पंक्तियों में रखने जैसा? कैसे मैं एक सरणी या कुछ में भेज सकते हैं?

— फ्रांसिस्को कॉर्लेस मोरेल्स

person[0].firstName person[0].lastName person[1].firstName person[1].lastName

— @FranciscoCorralesMorales

@ahmehri, तो क्या यह वैध HTML है <input name="person[1].lastName">?

— फ्रांसिस्को कोरलस मोरालेस

Answer 2

यदि आप पोस्ट विधि के साथ एक फॉर्म भेजना चाहते हैं, तो serialize () एक अच्छा विचार नहीं है। उदाहरण के लिए यदि आप किसी फ़ाइल को ajax के माध्यम से पारित करना चाहते हैं तो यह काम नहीं करने वाला है।

मान लीजिए कि हमारे पास इस आईडी के साथ एक फॉर्म है: "myform"।

बेहतर उपाय यह है कि फॉर्मडाटा बनाकर उसे भेजें:

    var myform = document.getElementById("myform");
    var fd = new FormData(myform );
    $.ajax({
        url: "example.php",
        data: fd,
        cache: false,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function (dataofconfirm) {
            // do something with the result
        }
    });

Comments

हां यह अपडेट किए गए ब्राउज़रों द्वारा समर्थित है लेकिन क्रमबद्ध रूप से उपयोग करके आप केवल तार पास कर सकते हैं।

— मोह अरजमंडी

हो सकता है कि आप अपने उत्तर में उल्लेख करें

— toesslab

धन्यवाद, दोनों के लिए var, 2016 में!

— सिलार

आप सुंदरी! आकर्षण की तरह काम किया (फॉर्म डेटा + फाइल अपलोड)

— saibbyweb

इस पर जोर नहीं दे सकता! की कोशिश की, form.serialize()लेकिन यह सिर्फ फ़ाइल अपलोड के लिए काम नहीं किया। new FormData(this)अच्छी तरह से काम किया

— Sasanka Panguluri

Answer 3

serialize()प्रपत्र तत्व पर सामान्य उपयोग में ।

कृपया ध्यान रखें कि एकाधिक <select> विकल्प एक ही कुंजी के अंतर्गत क्रमबद्ध हैं, उदाहरण के लिए

<select id="foo" name="foo" multiple="multiple">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
</select>

एक क्वेरी स्ट्रिंग में परिणाम होगा जिसमें एक ही क्वेरी पैरामीटर के कई आवृत्तियाँ शामिल हैं:

[path]?foo=1&foo=2&foo=3&someotherparams...

जो आप बैकएंड में नहीं चाहते हो सकता है।

मैं इस जेएस कोड का उपयोग कई मापदंडों को कम करने के लिए एक अल्पविराम से अलग की हुई कुंजी (बेशर्मी से जॉन रिग के स्थान पर थ्रेड में एक टिप्पणीकर्ता की प्रतिक्रिया से कॉपी) के लिए करता हूं:

function compress(data) {
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3");
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data;
}

जो ऊपर में बदल जाता है:

[path]?foo=1,2,3&someotherparams...

अपने जेएस कोड में आप इसे इस तरह कहेंगे:

var inputs = compress($("#your-form").serialize());

उम्मीद है की वो मदद करदे।

Comments

यदि आप PHP का उपयोग कर रहे हैं, तो यह parse_url फ़ंक्शन का उपयोग करते हुए एक querystring पार्स करने के लिए तुच्छ है: us3.php.net/manual/en/function.parse-url.php

— लोबोस

मुझे पता है कि यह पुराना है लेकिन आप यह कैसे जानते हैं कि इस पद्धति का उपयोग करके कौन से विकल्प चुने गए थे?

— yaspenalty.com

Answer 4

उपयोग

क्रमबद्ध करें( )

var str = $("form").serialize();

एक प्रपत्र को क्वेरी स्ट्रिंग में क्रमबद्ध करें, जिसे एक अजाक्स अनुरोध में एक सर्वर को भेजा जा सकता है।

Answer 5

ऐसा करने के लिए एक अच्छा jQuery विकल्प फॉर्मडाटा के माध्यम से है । फॉर्म के माध्यम से फाइल भेजने के दौरान यह विधि भी अनुकूल है!

<form id='test' method='post' enctype='multipart/form-data'>
   <input type='text' name='testinput' id='testinput'>
   <button type='submit'>submit</button>
</form>

JQuery में आपका भेजने का कार्य इस तरह दिखेगा:

$( 'form#test' ).submit( function(){
   var data = new FormData( $( 'form#test' )[ 0 ] );

   $.ajax( {
      processData: false,
      contentType: false,

      data: data,
      dataType: 'json',
      type: $( this ).attr( 'method' );
      url: 'yourapi.php',
      success: function( feedback ){
         console.log( "the feedback from your API: " + feedback );
      }
});

अपने फ़ॉर्म में डेटा जोड़ने के लिए आप या तो अपने फॉर्म में छिपे इनपुट का उपयोग कर सकते हैं, या आप इसे फ़्लाई पर जोड़ सकते हैं:

var data = new FormData( $( 'form#test' )[ 0 ] );
data.append( 'command', 'value_for_command' );

Comments

इसके url: $(this).attr('action'),बजाय फॉर्म के "एक्शन" विशेषता से url निकालने के लिए

— rubo77

Answer 6

आपको सिर्फ डेटा पोस्ट करना है। और jquery ajax फ़ंक्शन सेट पैरामीटर का उपयोग करना। यहाँ एक उदाहरण है।

<script>
        $(function () {

            $('form').on('submit', function (e) {

                e.preventDefault();

                $.ajax({
                    type: 'post',
                    url: 'your_complete url',
                    data: $('form').serialize(),
                    success: function (response) {
                        //$('form')[0].reset();
                       // $("#feedback").text(response);
                        if(response=="True") {
                            $('form')[0].reset();
                            $("#feedback").text("Your information has been stored.");
                        }
                        else
                            $("#feedback").text(" Some Error has occured Errror !!! ID duplicate");
                    }
                });

            });

        });
    </script>

Answer 7

अन्य समाधान मेरे लिए काम नहीं किया। हो सकता है कि पुरानी DOCTYPE परियोजना में मैं HTML5 विकल्पों को रोकने पर काम कर रहा हूं।

मेरा समाधान:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}