IE8

Question

के साथ jQuery AJAX एक फॉर्म सबमिट करने वाले उपयोगकर्ता पर $.ajax के माध्यम से एक अनुरोध अनुरोध लागू करने का प्रयास कर रहा हूं।

मुझे यकीन नहीं है कि मैं जो कर रहा हूं वह सबसे प्रभावी तरीका है (फॉर्म बटन पर क्लिक बाध्यकारी) ताकि यदि कोई अधिक प्रभावी तरीका (या मानक तरीका) हो, तो कृपया इसका सुझाव दें!

मेरा परिणाम यह है कि सामग्री div एफएफ/क्रोम में ठीक से भर जाता है, लेकिन आईई यह नहीं है। आईई प्रपत्र जमा कर रहा है और पृष्ठ को पूरी तरह से पुनः लोड कर रहा है।

इसके अलावा, मुझे सच में लगता है कि मुझे फ़ॉर्म को "सबमिट" करने की आवश्यकता है, क्योंकि मैं jQuery validate(); का लाभ लेना चाहता हूं जो नीचे कार्यान्वयन (यहां तक ​​कि एफएफ/क्रोम में भी) के साथ काम नहीं करता है।

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

$(document).ready(function(){ 

    $("#theForm").submit(function(){ 
     // build our data to send in our request 
     var mydata = {method: "search", color: $('#color').val()}; 

     $.ajax({ 
      url: 'foo.php', 
      data: mydata, 
      type: 'get', 
      dataType: 'json', 
      success: function(data){ 
       $("#content").html(data); 
      } 
      error: function(e){ 
      console.log(e.message); 
      } 
     }); 
    return false; 
    }); 
}); 

एचटीएमएल:

<form id="search"> 
     <input type="submit" /> 
</form> 

<div id="content"></div> 

Answer 1

आप अपने सबमिट बटन पर बदलना चाहिए प्रकार बटन के होने के लिए। प्रकार के इनपुट स्वचालित रूप से पृष्ठ पोस्ट करते हैं और आपके मामले में यह आवश्यक नहीं है।

<input type="button" id="search-button"> 

नहीं तो आप event.preventDefault() का उपयोग कर बटन के डिफ़ॉल्ट कार्रवाई रोक सकते हैं।

$("#search-button").click(function(event){ 
    event.preventDefault(); 

    $.ajax({ 
     url: 'foo.php', 
     data: mydata, 
     type: 'get', 
     dataType: 'json', 
     contentType: 'application/json', 
     success: function(data){ 
      $("#content").html(data); 
     } 
    }); 
}); 

जब से तुम एचटीएमएल सर्वर से वापस उम्मीद कर रहे हैं, यह निर्दिष्ट करने के लिए dataType कि आप उम्मीद कर रहे हैं वास्तव में एचटीएमएल है सबसे अच्छा है। ध्यान दें, आपने पहले जेसन को dataType माना था। आप contentType का उपयोग कर सर्वर पर जा रहे डेटा के प्रकार को भी निर्दिष्ट कर सकते हैं, जो आपके मामले में जेसन है इसलिए आपको application/json का उपयोग करना चाहिए।

आपकी टिप्पणियों के अनुसार, आपका डेटा टाइप जेसन होना चाहिए।

मैंने अभी देखा है कि ऐसा लगता है कि आपका $(document).ready(function() {}); बंद नहीं प्रतीत होता है। आप ); भूल गए थे। क्या यह एक कॉपी पेस्ट मुद्दा है?

आपके हालिया कोड संपादन के बाद, आपको अपनी सफलता और त्रुटि के बीच एक अल्पविराम दिखाई दे रहा है।

$.ajax({ 
    url: 'foo.php', 
    data: mydata, 
    type: 'get', 
    dataType: 'json', 
    success: function(data){ 
     $("#content").html(data); 
    }, // <--- 
    error: function(e){ 
     console.log(e.message); 
    } 
}); 

Answer 2

आपको फ़ॉर्म की घटना प्रस्तुत पर बाध्य करना चाहिए, और डिफ़ॉल्ट घटना को रद्द - जो पर्चे को जमा किया जाता है (या तो event.preventDefault() या बस return false;, जो will also stop propagation द्वारा)।

<form id="theForm"> 
<input type="submit" id="search-button"> 
</form> 


$("#theForm").submit(function(){ 

$.ajax({ 
    url: 'foo.php', 
    data: mydata, 
    type: 'get', 
    dataType: 'json', 
    success: function(data){ 
      $("#content").html(data); 
     } 
    }); 

    return false; 
}); 

भी ध्यान दें कि jsondataType में स्ट्रिंग 'json' होना चाहिए। आप getJSON() का उपयोग करने पर भी विचार कर सकते हैं। मैंने कोड से कुछ अनावश्यक पात्र भी साफ किए।

Answer 3

मैं अंत में एक नि: शुल्क से चली आ रही कार्यप्रणाली को कॉल करने की कोशिश की:

$.ajax({ 
    ... 
    ,success: function(data){ 
     updCont(data) 
    } 
... 
}); 
function updCont(htm){ 
    $("#content").html(htm); 
} 

मैं इस समस्या पर दिन के एक जोड़े खो दिया! दुःस्वप्नशायद आईई 8 विदेशी सामग्री पर भरोसा नहीं करता है इसलिए AJAX से नई सामग्री डालने की अनुमति नहीं है, जबकि पहले से मौजूद फ़ंक्शन में अधिक शक्ति और कम ब्राउज़र सुरक्षा समस्याएं हैं?

ओह, ये भी event.preventDefault() की जाँच

परिवर्तन से अधिक