0

私のウェブサイトには次のフォームがあります。

      <form action="" method="GET">
        <input type="text" name="query" value="" />
        <input type="button" name="talk" value="talk" onClick="askCow(this.form)" />
      </form>

ボタンをクリックすると、ページを更新するAJAXリクエストが発生します。ただし、returnを使用することはできません。GETを使用してフォームを送信するだけですが、これは望ましい動作ではありません。または同様のものを使用onsumit="return false;"すると送信が無効になりますが、これは望ましい動作ではありません。

askCowフォームが送信されていないことを確認しながら、エンタープレス（「フォーム送信」）で機能を実行するにはどうすればよいですか？私はこれをするのは悪い人ですか？私がAJAXを使用する理由は、サーバー側のテンプレートロジックを完全に省略できるからです。

ありがとう！

編集：ここに完全なページがあります

<html>
  <head><title>Psycowlogist</title></head>
  <body>
    <div id="history">
      Previous discussion
    </div>
    <div id="cow">
      <pre>
 _______________________
< What is your problem? >
 -----------------------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
      </pre>
    </div>
    <div id="talk">
      <form id="talkForm" action="" method="GET" onsubmit="askCow(this)">
        <input type="text" name="query" value="" />
        <input type="button" name="talk" value="talk" onClick="askCow(this.form)" />
      </form>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/coffeescript">
    $j = jQuery

    window.askCow = (form) ->
      $j.get "/cowanswer",
      {q: form.query.value},
      (data) -> $j("#cow pre").html(data["cow-answer"])
      return false
  </script>  
 </html>
4

2 に答える 2

2

ただ使用onsubmit eventするform

  <form action="" method="GET" onsubmit="return askCow(this);">
    <input type="text" name="query" value="" />
    <input type="button" name="talk" value="talk"/>
  </form>

askCow関数は次のようになります

function askCow()
{
    //do ajax stuff
    return false;
}
于 2012-05-19T08:11:11.353 に答える
1

jQueryフォームプラグインを使用できます。

そして、呼び出し内で、を呼び出すことができますaskCow()。

    var options = {
        target:        '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 
    }; 

 $('#theForm').submit(function() { 
        askCow(this);
        $(this).ajaxSubmit(options); 

        return false; 
    });
于 2012-05-19T08:10:33.213 に答える