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在确保未提交表单的同时在 enter press（“表单提交”）上执行该功能？我这样做是坏人吗？我使用 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 回答