Блог

У меня есть следующий код, но когда я отправляю перенаправление со страницы. Я хочу иметь возможность публиковать в ней с помощью jquery / ajax, чтобы страница не обновлялась при отправке. Может ли кто-нибудь показать мне демо-версию jsfiddle?

 <form id="widget_contact" action="http://www.mysaintssearch.com/?cmd=sb-gimmeamp;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>
  

Взгляните на jQuery post() :

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

Вы запросили jsFiddle

HTML

Мне пришлось изменить URL действия, иначе это 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');
        }
    });
});
  

Я настоятельно рекомендую использовать плагин jQuery form.

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

    $.post('http://www.mysaintssearch.com/?cmd=sb-gimmeamp;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           
});
  

Есть несколько вещей, которые я не использую на своих веб-сайтах:

форма, таблица, тип ввода «Отправить», кнопка «тип ввода», имя в идентификаторах, если это не элемент с несколькими вариантами выбора (например, флажок)

В данном случае, в частности, мое решение было бы:

 <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  = 'amp;hdnCmd=' $('#hdnCmd').text();
    $.post('processingPage.asp', myData, function (data) {
        ... display a returning success or failure
    });
}