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

目标是将结果放入 <tbody> “searchResults”表的一部分。

<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()。 (它的语法与上面完全相同。)