0

我有一个带有两个输入框的表单。歌曲和艺术家。当按下搜索按钮时，它使用 JQuery 函数.post()将数据发布到 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>

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

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

4

1 回答 1

2

尝试这个...

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

于 2013-09-25T14:09:39.983 回答