我想知道如何通過Ajax（使用原型框架）提交表單並在「結果」div中顯示服務器響應。 的HTML看起來像這樣：使用原型通過Ajax提交表單並更新結果div
<form id="myForm" action="/getResults">
[...]
<input type="submit" value="submit" />
</form>
<div id="result"></div>
我試圖附加一個JavaScript函數（它使用的Ajax.Updater），以「的onsubmit」（在表單上）和「點擊」（輸入），但形式是在函數結束後仍然提交「非Ajax」（因此整個頁面被結果替換）。
檢查原型API的頁面上的Form.Request和Event處理。
基本上，如果你有這樣的：
<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
});
您需要從阻止標準表單提交的ajax函數返回值false。
<form id="myForm" onsubmit="return myfunc()" action="/getResults">
function myfunc(){
... do prototype ajax stuff...
return false;
}
形式也使用的onsubmit捕捉誰與回車鍵提交用戶使用。
您首先需要serialize your form，然後調用Ajax Updater，使用POST options並將序列化表單數據傳遞給它。結果將出現在您已確認的元素中。
@Paolo表示它已經序列化我們的表單併發送它的方式。 – 2013-05-07 12:53:05
你需要停止onsubmit事件的默認操作。
例如：
function submit_handler(e){
Event.stop(e)
}
我做了在函數「返回false」，但我缺少的onsubmit函數上方的回... – Vinze 2009-01-14 15:33:14
已經做到了這一個我自己幾百次;） – krosenvold 2009-01-14 15:35:49