使用Prototype通过Ajax提交表单并更新结果div

Question

我想知道如何通过Ajax（使用原型框架）提交表单并在“result” div中显示服务器响应。 HTML看起来像这样：

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

我尝试将一个使用Ajax.Updater的javascript函数附加到“onsubmit”（在表单上）和“onclick”（在输入上），但是在函数结束后，表单仍然以“非Ajax”方式提交（因此整个页面被结果替换）。

- Vinze

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
});

- Paolo Bergantino

---

我认为这个答案比被选中的答案更好，因为这样你可以在JavaScript端完成所有操作。不需要将onsubmit="return myfunc()"添加到表单中。 - AntonioCS

分离非常重要，我完全同意！ - Reed Richards

注意：原型与通过Ajax提交的文件上传不兼容。请参见http://www.ruby-forum.com/topic/136931。 - gatoatigrado

另外一个提示 - 你可能需要先调用Event.stop()，以防遇到异常。 - gatoatigrado

这对我有用。虽然由于我是完全的JavaScript新手，花了一些时间才意识到为了使此功能起作用，JavaScript必须出现在我的源代码中的表单之后或在动态创建项目之后。 - texmex5

Answer 2

首先，您需要序列化您的表单，然后使用Ajax更新器调用，使用POST选项并传递序列化的表单数据。结果将出现在您指定的元素中。

- Diodeus

---

@Paolo所说的方法已经将我们的表单序列化并发送了。 - Ricardo Martins

Answer 3

您需要从ajax函数返回值false，以阻止标准表单提交。

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


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

在表单上使用onsubmit还可以捕获使用回车键提交的用户。

- krosenvold

---

我在函数中使用了“return false”，但是在onsubmit中缺少了函数上面的返回。 - Vinze

Answer 4

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

例如：

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

有关在Prototype中停止默认事件行为的更多信息 »

- Triptych