Question

我在我的website中有以下表格。

      <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>

Answer 1

只需使用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;
}

Answer 2

您可以使用jQuery Form Plugin。

在通话中，您可以拨打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; 
    });

完全从Javascript处理表单

2 个答案: