如何發佈到與jQuery/ajax表單

Question

我有以下代碼，但是當我提交從頁面重定向。我希望能夠使用jquery/ajax發佈，以便頁面在提交時不會刷新。有人可以給我看一個jsfiddle演示嗎？

<form id="widget_contact" action="http://www.mysaintssearch.com/?cmd=sb-gimme&from=?cmd=home" method="post"> 
<input type="text" name="pcode" id="fc_name" /> 
<input type="hidden" name="hdnCmd" value="sb-gimme" /> 
<input name="send_button" id="fc_submit" class="btn_b" type="submit" value="Gimme" /> 
</form> 

Answer 1

在jQuery的post()看看：

$.ajax({ 
    type: 'POST', 
    url: url, 
    data: data, 
    success: success, 
    dataType: dataType 
}); 

Answer 2

我強烈建議使用jQuery form plugin。

Answer 3

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

    $.post('http://www.mysaintssearch.com/?cmd=sb-gimme&from=?cmd=home', $('#widget_contact').serialize(), function(data) { 
     // data is the variable that's returned from the form page 

    }); 
return false; // so the page won't submit   
}); 

Answer 4

您請求jsFiddle

HTML

我不得不修改行動網址，否則就XSS

<form id="widget_contact" action="/" method="post"> 
<input type="text" name="pcode" id="fc_name" /> 
<input type="hidden" name="hdnCmd" value="sb-gimme" /> 
<input name="send_button" id="fc_submit" class="btn_b" type="submit" value="Gimme" /> 
</form> 

JAVASCRIPT

$('#widget_contact').submit(function(e){ 
    e.preventDefault(); 
    var form = $(this); 

    $.ajax({ 
     url: form.prop('action'), 
     method: form.prop('method'), 
     data: form.serialize(), 
     success: function(){ 
      alert('Hurraaaayyy'); 
     } 
    }); 
}); 

Answer 5

有幾件事情，我不，我的網站使用：

形式， 表， 輸入類型提交， 輸入型按鈕，在標識 名稱，除非它是一個選擇題項目（像複選框）

在這種情況下，在這裏，特別是，我的解決辦法是：

<div ....> 
<input type="text" id="fc_name" /> 
<span id='hdnCmd' style='display:none; ' >sb-gimme</span> 
<span onClick='mySubmit(); ' >SUBMIT</span> 
</div> 

... 
function mySubmit() { 
    var myData = 'fc_name='+$('#fc_name').val(); 
     myData += '&hdnCmd='+$('#hdnCmd').text(); 
    $.post('processingPage.asp', myData, function (data) { 
     ... display a returning success or failure 
    }); 
}