jquery AJAX फ़ॉर्म दो बार सबमिट करता है

Question

मेरे पास एक ऐसा फॉर्म है जिसे मैं jquery के माध्यम से कैप्चर कर रहा हूं और AJAX के माध्यम से भेज रहा हूं। मेरी समस्या यह है कि जब भी मैं पेज रीफ्रेश करता हूं तो फॉर्म एक बार से अधिक बार सबमिट करता है।

मैंने सबमिट बटन को अनबिंड करने का प्रयास किया है लेकिन फिर फॉर्म को सबमिट करने के बाद सामान्य रूप से पोस्ट किया जाता है। किसी भी मदद

$('#exportForm').submit(function() { 

    $.ajax({ 
    type: "POST", 
    url: $(this).attr('action'), 
    data: $(this).serialize(), 
    success: function(response) { 
     $('#exportForm').unbind('submit'); 
     console.log(response); 
    } 
    }); 

    return false; 
}); 

Answer 1

सराहना की जाएगी यह सबसे अधिक संभावना है कि आप ajax घटना को गति प्रदान करने के लिए एक button या submit का उपयोग कर रहे है। इसे आज़माएं:

$('#exportForm').submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: $(this).attr('action'), 
      data: $(this).serialize(), 
      success: function(response) { 
       console.log(response); 
      } 
     }); 

     return false; 
    }); 

Answer 2

साथ ही रोकथाम डीफॉल्ट को कॉल करना, ईवेंट पर स्टॉपइमीडिएटप्रॉपेशन को भी कॉल करें।

$('#exportForm').submit(function(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    $.ajax({ 
     type: "POST", 
     url: $(this).attr('action'), 
     data: $(this).serialize(), 
     success: function(response) { 
      console.log(response); 
     } 
    }); 

    return false; 
}); 

Answer 3

मामले में आप सत्यापन के कुछ प्रकार (उदाहरण, jQuery मान्यकरण) का उपयोग कर रहे हैं, प्रपत्र दो बार प्रस्तुत किया जाता है क्योंकि $('#exportForm').submit से अलग आप अपने आप को लिखने, सत्यापन प्लगइन के बाद भी उसमें सफलतापूर्वक सभी क्षेत्र सत्यापित करता प्रपत्र प्रस्तुत करेगा।

एनबी: यदि आप jQuery सत्यापन का उपयोग कर रहे हैं, तो .submit() का उपयोग करने से बचें। इसके बजाय, submitHandler का उपयोग करें।

Answer 4

समस्या को आपके PHP फॉर्म पर एक बटन के स्थान पर div का उपयोग करके हल किया जा सकता है। AJAX के उपयोग के कारण एक बटन की आवश्यकता नहीं है।

Answer 5

जैसा कि क्रिस सेरकोबे ने बताया, e.stopImmediatePropagation() काम करता है और यह निश्चित रूप से समस्या को हल करता है, लेकिन आपको इसका उपयोग नहीं करना चाहिए। समस्या अभी भी आपके कोड में मौजूद है। मुझे दो उदाहरण अनुरोधों को कैसे भेजा जा सकता है इसका एक उदाहरण बताएं:

यदि आप एंगुलरजेएस का उपयोग कर रहे हैं, और कहें कि आप "हैंडलएजैक्स कंट्रोलर" नामक नियंत्रक बनाते हैं तो आप इस एनजी-नियंत्रक को एक div में असाइन कर सकते हैं, और फिर गलती से असाइन कर सकते हैं एक आंतरिक div के लिए यह वही एनजी नियंत्रक। इससे पोस्ट अनुरोध दो बार भेजा जाएगा। तो:

<div ng-controller='HandleAjaxController'> 
     <div ng-controller='HandleAjaxController'> 
      <button id="home" type="button" class="btn btn-success">Send data</button> 

यह एक समय मेरे लिए तनाव का एक बहुत का कारण बना क्योंकि मेरे एनजी-मार्ग में मैं यहाँ में नियंत्रक स्थापित किया था:

$routeProvider 
    .when("/", { 
     templateUrl : "src/js/partials/home.html", 
     controller : "HandleAjaxController" 
    }) 

और फिर मैं इसे फिर से सेट अपने घर में। एचटीएमएल: <div ng-controller='HandleAjaxController'>

वैसे भी, यह एक उदाहरण है कि दो पदों को कैसे भेजा जा सकता है।

Answer 6

मैं दो बार jquery.unobtrusive-ajax.min.js रेफरी को शामिल किया है, जैसा कि यहाँ https://stackoverflow.com/a/15041642/4412545