8

我想知道如何通过 Ajax(使用原型框架)提交表单并在“结果”div 中显示服务器响应。html 看起来像这样:

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

我尝试将一个javascript函数(使用Ajax.Updater)附加到“onsubmit”(在表单上)和“onclick”(在输入上),但在函数结束后表单仍然是“非Ajax”提交(所以整个页面被结果替换)。

4

4 回答 4

33

查看 Prototype API 的页面Form.RequestEvent处理。

基本上,如果你有这个:

<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
});
于 2009-01-14T15:21:03.627 回答
3

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

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


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

}

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

于 2009-01-14T15:11:44.690 回答
3

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

于 2009-01-14T15:16:34.867 回答
0

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

例如:

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

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

于 2009-01-14T15:27:34.363 回答