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

最初に form をシリアル化し、次にPOST オプションを使用してAjax Updaterを呼び出し、シリアル化されたフォーム データを渡す必要があります。結果は、指定した要素に表示されます。

于 2009-01-14T15:16:34.867 に答える
0

onsubmitイベントのデフォルト アクションを停止する必要があります。

例えば：

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

プロトタイプでデフォルトのイベント動作を停止する方法の詳細»

于 2009-01-14T15:27:34.363 に答える