我想知道如何通过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