JQuery .post（）将html返回到表

Question

我有一个带有两个输入框的窗体。歌曲和艺术家。当按下搜索按钮时，它使用.post()的JQuery函数将数据发布到PHP页面并将结果返回到页面。

这里是我的JavaScript代码：

<script> 
    $(function() { 

     $("#submitSearch").bind("click", function() { 
      var songTitle = $("#song").val(); 
      var artistName = $("#artist").val(); 

      $.post("getSearchResults.php", { 
       artist: artistName, 
       song: songTitle 
      }, 
      function(data, status) { 
       $("#searchResults tbody").last().append(data); 
      }); 
     }); 
    }); 
</script> 

的目标是把结果放到了“SearchResult所”表的<tbody>。

<table id="searchResults"> 
    <thead> 
     <tr> 
      <th>Title</th> 
      <th>Artist</th> 
      <th>Album</th> 
      <th>Add To List</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

但是，它似乎没有将结果插入表中。

直到我把一个alert()消息放在Javascript代码中，它才显示它。

<script> 
    $(function() { 

     $("#submitSearch").bind("click", function() { 
      var songTitle = $("#song").val(); 
      var artistName = $("#artist").val(); 

      $.post("getSearchResults.php", { 
       artist: artistName, 
       song: songTitle 
      }, 
      function(data, status) { 
       $("#searchResults tbody").last().append(data); 
      }); 

      alert("test"); 

     }); 
    }); 
</script> 

当我关闭“测试”警报时，它会将结果放入表格中，并很快消失。

我在这里错过了什么？请帮帮我！我很难过。提前致谢。

Answer 1

尝试......

<script> 
    $(function() { 

     $("#submitSearch").bind("click", function(e) { 
      e.preventDefault(); 
      var songTitle = $("#song").val(); 
      var artistName = $("#artist").val(); 

      $.post("getSearchResults.php", { 
       artist: artistName, 
       song: songTitle 
      }, 
      function(data, status) { 
       $("#searchResults tbody").last().append(data); 
      }); 
     }); 
    }); 
</script> 

我添加了一个事件参数的点击功能，和e.preventDefault()。这会停止实际发生的提交，这正在重新加载您的页面。另外，根据您使用的是哪个版本的jQuery，您可能需要使用on()而不是bind()。 （它与上面的语法完全相同。）