使用原型通过 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

查看 Prototype 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
});

Answer 2

你首先需要 序列化你的表单, ，然后致电 阿贾克斯更新程序, ， 使用 开机自检选项 并向其传递序列化的表单数据。结果将出现在您指定的元素中。

Answer 3

您需要返回的值从AJAX函数，标准形式提交哪些块假。

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


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

}

使用的onsubmit表单上也抓住谁与回车键提交用户使用。

Answer 4

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

例如：

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

在原型»上停止默认事件行为更多信息