javascript - 使用原型(prototype)通过 Ajax 提交表单并更新结果 div

Question

我想知道如何通过 Ajax(使用原型(prototype)框架)提交表单并在“结果”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 上查看 Prototype API 的页面和 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
});