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

一尘不染

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

ajax

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

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

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

阅读 197

2020-07-26

共1个答案

一尘不染

查看Form.Request和Event处理Prototype
API的页面。

基本上，如果您有：

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

2020-07-26