0

入力ボックスが 2 つあるフォームがあります。歌とアーティスト。検索ボタンが押されると、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>

クリック関数にイベント パラメータを追加し、e.preventDefault(). これにより、送信が実際に行われなくなり、ページがリロードされます。また、使用している jQuery のバージョンによってはon()、bind(). (上記とまったく同じ構文です。)

于 2013-09-25T14:09:39.983 に答える