2011-01-03 29 views
33

एक ASP.NET MVC अनुप्रयोग में मैं पर डेटा पोस्ट करने के लिए jQuery का उपयोग बटन क्लिक करें:jQuery पोस्ट अनुरोध (नहीं AJAX)

<button onclick="addProducts()">Add products</button> 
.... 
$.post('<%= Url.Action("AddToCart", "Cart") %>', 
      { 
       ... 
       returnUrl: window.location.href 
      }); 

"कार्ट" नियंत्रक के "addToCart जैसा" कार्रवाई में मैं करने के लिए पुनर्निर्देशन का उपयोग पोस्ट करने के बाद एक और दृश्य:

public RedirectToRouteResult AddToCart(..., string returnUrl) 
    { 
     ... 
     return RedirectToAction("Index", new { returnUrl });    
    } 

सभी पुनर्निर्देशन को छोड़कर ठीक है। मैं पोस्ट करने के बाद एक ही पेज पर रहता हूं। मुझे संदेह है कि यह "पोस्ट" अनुरोध के AJAX प्रकार के कारण है।

पुनर्निर्देशन को अवरुद्ध करने वाले jQuery POST अनुरोध के साथ समस्या का समाधान कैसे करें?

+0

क्या आप उसी पृष्ठ पर रीडायरेक्ट करने का प्रयास कर रहे हैं जो अजाक्स अनुरोध शुरू करता है? – Corneliu

उत्तर

84

मैं जो एक गुप्त फ़ॉर्म बनाता है, निर्दिष्ट डेटा के साथ भरता है और <body> करने के लिए इसे देता एक $.form(url[, data[, method = 'POST']]) समारोह बनाया। यहाँ कुछ उदाहरण हैं:

$.form('/index') 

<form action="/index" method="POST"></form> 
$.form('/new', { title: 'Hello World', body: 'Foo Bar' }) 

<form action="/index" method="POST"> 
    <input type="hidden" name="title" value="Hello World" /> 
    <input type="hidden" name="body" value="Foo Bar" /> 
</form> 
$.form('/info', { userIds: [1, 2, 3, 4] }, 'GET') 

<form action="/info" method="GET"> 
    <input type="hidden" name="userIds[]" value="1" /> 
    <input type="hidden" name="userIds[]" value="2" /> 
    <input type="hidden" name="userIds[]" value="3" /> 
    <input type="hidden" name="userIds[]" value="4" /> 
</form> 
$.form('/profile', { sender: { first: 'John', last: 'Smith', postIds: null }, 
        receiver: { first: 'Foo', last: 'Bar', postIds: [1, 2] } }) 

<form action="/profile" method="POST"> 
    <input type="hidden" name="sender[first]" value="John"> 
    <input type="hidden" name="sender[last]" value="Smith"> 
    <input type="hidden" name="receiver[first]" value="John"> 
    <input type="hidden" name="receiver[last]" value="Smith"> 
    <input type="hidden" name="receiver[postIds][]" value="1"> 
    <input type="hidden" name="receiver[postIds][]" value="2"> 
</form> 

jQuery के .submit() विधि के साथ आप बना सकते हैं और एक सरल अभिव्यक्ति के साथ एक प्रपत्र सबमिट कर सकते हैं:

$.form('http://stackoverflow.com/search', { q: '[ajax]' }, 'GET').submit(); 

यहाँ समारोह परिभाषा है:

jQuery(function($) { $.extend({ 
    form: function(url, data, method) { 
     if (method == null) method = 'POST'; 
     if (data == null) data = {}; 

     var form = $('<form>').attr({ 
      method: method, 
      action: url 
     }).css({ 
      display: 'none' 
     }); 

     var addData = function(name, data) { 
      if ($.isArray(data)) { 
       for (var i = 0; i < data.length; i++) { 
        var value = data[i]; 
        addData(name + '[]', value); 
       } 
      } else if (typeof data === 'object') { 
       for (var key in data) { 
        if (data.hasOwnProperty(key)) { 
         addData(name + '[' + key + ']', data[key]); 
        } 
       } 
      } else if (data != null) { 
       form.append($('<input>').attr({ 
        type: 'hidden', 
        name: String(name), 
        value: String(data) 
       })); 
      } 
     }; 

     for (var key in data) { 
      if (data.hasOwnProperty(key)) { 
       addData(key, data[key]); 
      } 
     } 

     return form.appendTo('body'); 
    } 
}); }); 
+2

जेरेमी, साझा करने के लिए धन्यवाद, +1 – rem

+0

अद्भुत! मुझे नहीं पता कि यह एक अच्छा अभ्यास है लेकिन मुझे इस समाधान से प्यार है। +1 – Samuel

+0

जब आप फ़ंक्शन को दो बार कॉल करते हैं तो एकाधिक छिपे हुए फॉर्मों को रोकने के लिए .submit() के बाद .remove() को कॉल क्यों नहीं करते? – Samuel

9

$.post एक AJAX कॉल है।

आपकी सबसे अच्छी शर्त बटन को फ़ॉर्म के लिए ट्रिगर बनाना है और बस पोस्ट विधि का उपयोग करके सबमिट करना है।

सर्वर से आपका नया यूआरएल गूंजने का एक विकल्प होगा, लेकिन यह AJAX के बिंदु को हरा देता है।

7

jQuery.submit उपयोग करें() प्रपत्र प्रस्तुत करने के लिए: http://api.jquery.com/submit/

+0

'jQuery.submit()' मान्य विधि नहीं है – Orlando

3

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

function addProducts() { 
    $.post('<%= Url.Action("AddToCart", "Cart") %>',{ 
     returnUrl: window.location.href 
    }, function(data){ 
     window.location.href = window.location.href 
    }); 
} 

यह आपके उत्पादों को पोस्ट करने के बाद आपके वर्तमान पृष्ठ को रीफ्रेश करेगा। http://jsfiddle.net/brentmn/B4P6W/3/

1

आप एक पोस्ट के बाद एक पूर्ण रीडायरेक्ट कर रहे हैं, तो क्यों यह अजाक्स के साथ कार्य करें:

यहाँ संदर्भ के लिए एक बेला है? आपको यहां एक पारंपरिक पोस्ट करने में सक्षम होना चाहिए और इसे सफलतापूर्वक रीडायरेक्ट करना चाहिए।

आप वास्तव में के माध्यम से जाना है और अभी भी हैं, रीडायरेक्ट करने के लिए है कि एक RedirectResult के बजाय अपनी कार्रवाई से एक JavascriptResult लौटने के लिए होगा एक बहुत ही आसान और गैर दखल तरह से करने के लिए एक ajax अनुरोध करना चाहते हैं:

return JavaScript("window.location = " + returnUrl); 
संबंधित मुद्दे