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

您申请了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 3

我强烈建议您使用 jQuery form plugin 。

Answer 4

$('#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 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
    });
}

如何使用jquery / ajax发布到表单

5 个答案: