jQuery表单提交问题答案

【问题标题】：Trouble with jQuery form submitjQuery表单提交问题
【发布时间】：2010-02-23 04:29:31
【问题描述】：

我对一些简单的 jQuery 感到不知所措。我在一个单独的文件中有以下代码：

 $(document).ready(function(){
    //$("#trackit").click(function() {  

    $.ajax({
       type: "POST",
       url: 'include/trackit.php',
       data: "trackingNum=123456",
       success: function(data) {
         alert(data);
       }
    });

   //});  
});

这很好用，在页面加载时它会将预期数据返回到警报窗口。

但是，如果我从这一行中删除 cmets：

$("#trackit").click(function() {

为了捕获表单的提交按钮，我没有得到任何返回数据。

这是缩写形式的信息：

<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" name="tForm" id="tForm" method="post">

    <button type="submit" class="buttonTracking" id="trackit" name="trackit">Track It!</button>

</form>

我只是在这里忽略了一些简单的错误吗？

【问题讨论】：

标签： php jquery forms

【解决方案1】：

正确的工作代码是这样的：

 $(document).ready(function(){
    $("#trackit").click(function() {  

    $.ajax({
       type: "POST",
       url: 'include/trackit.php',
       data: "trackingNum=123456",
       success: function(data) {
         alert(data);
       }
    });
    return false; // to cancel form submission and subsequent page refresh
   });  
});

【讨论】：

【解决方案2】：

我会说这是因为#trackit 按钮也是一个提交按钮。点击操作正在执行您的 javascript 并提交表单。您需要将代码更改为：

$(document).ready(function(){
  $("#trackit").click(function() {  

  $.ajax({
    type: "POST",
    url: 'include/trackit.php',
    data: "trackingNum=123456",
    success: function(data) {
      alert(data);
    }
  });
  return false;
 });  
});

【讨论】：