JQuery .post() 将 html 返回到表中答案

【问题标题】：JQuery .post() return html into tableJQuery .post() 将 html 返回到表中
【发布时间】：2013-09-25 22:09:39
【问题描述】：

我有一个带有两个输入框的表单。歌曲和艺术家。当按下搜索按钮时，它使用.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>

目标是将结果放入“searchResults”表的<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>

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

直到我在 Javascript 代码中添加 alert() 消息，它才会显示它。

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

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

我在这里缺少什么？请帮我！我难住了。提前致谢。

【问题讨论】：

有没有其他引用#searchResults的javascript？
我的盲目猜测是：其他一些代码会干扰您的表格。您还有其他与表格混淆的 javascript 代码吗？
不，JS代码中只有一处引用$("#searchResults")，如上所示。
当我将alert() 放入代码中时，我发现它显示结果的方式很奇怪。好像我需要像on success 这样的东西......然后展示它。
我认为 Archer 可能是正确的。警报会延迟页面刷新足够长的时间以完成 ajax 调用。

标签： javascript php jquery .post

【解决方案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>

我在click函数中添加了一个事件参数，e.preventDefault()。这会阻止提交实际发生，即重新加载您的页面。此外，根据您使用的 jQuery 版本，您可能希望使用 on() 而不是 bind()。（和上面的语法完全一样。）

【讨论】：

是的，这行得通。非常感谢您的帮助。现在这是有道理的。文本框和输入按钮位于 <form> 标记内，因此确实有意义。
没问题 - 很高兴为您提供帮助 :)
Archer - 接受的答案。谢谢，我知道它必须是简单的！感谢像您这样的其他开发人员社区。让它成为美好的一天！