使用原型通過Ajax提交表單並更新結果div

Question

我想知道如何通過Ajax（使用原型框架）提交表單並在“結果”div中顯示服務器響應。 html看起來像這樣：

<form id="myForm" action="/getResults">
    [...]
    <input type="submit" value="submit" />
</form>
<div id="result"></div>

我試圖將一個javascript函數（使用Ajax.Updater）附加到“onsubmit”（在表單上）和“onclick”（在輸入上）但是在函數結束后表單仍然是“非Ajax”（所以整個頁面被結果替換）。

Answer 1

在Form.Request和Event處理上查看Prototype API的頁面。

基本上，如果你有這個：

<form id='myForm'>
.... fields ....
<input type='submit' value='Go'>
</form>
<div id='result'></div>

你的js會或多或少：

Event.observe('myForm', 'submit', function(event) {
    $('myForm').request({
        onFailure: function() { .... },
        onSuccess: function(t) {
            $('result').update(t.responseText);
        }
    });
    Event.stop(event); // stop the form from submitting
});

Answer 2

您需要從ajax函數返回false值，該函數會阻止標准表單提交。

<form id="myForm" onsubmit="return myfunc()" action="/getResults">


function myfunc(){
   ... do prototype ajax stuff...
  return false;

}

在表單上使用onsubmit還會捕獲使用回車鍵提交的用戶。

Answer 3

首先需要序列化表單 ，然后使用POST選項調用Ajax更新程序並將序列化表單數據傳遞給它。 然后結果將出現在您分離的元素中。

Answer 4

您需要停止onsubmit事件的默認操作。

例如：

function submit_handler(e){
    Event.stop(e)
}

有關在Prototype中停止默認事件行為的更多信息»