jQuery Load函數未在div內加載但加載了新頁面

Question

我有以下html標記：

<button class="btn btn-success" id="search"><span class="glyphicon glyphicon-search"></span> Search</button>
<div class="row text-center" style="margin-top: 50px;">
        <div class="col-md-12">
            <div id="content-area"></div>
        </div>
    </div>

我想在＃content-area內加載page.php。 這是我為此使用的jQuery：

$("#search").click(function(){
    $("#content-area").load("page.php");
});

問題是page.php不在＃content-area內部加載，但它本身作為新頁面加載。 我希望page.php加載到＃content-area中。 請幫忙。

Answer 1

//您必須進行ajax調用才能獲得沒有頁面加載的內容。

$("#search").click(function(){
          $.ajax({
                url: 'page.php', // point to server-side PHP script
                dataType: 'json', // what to expect back from the PHP script, if anything
                type: 'POST',           
            success: function (data) {
                if (data.status === 'success')
                {
                   $("#content-area").html(data);

                }
                else if (data.status === 'error')
                {
                    alert(data.message);
                }
            },
            error: function (e) {
                return false;
                Msg.show('Something went wrong, Please try again!','danger', 7000);
            }
        });    
});

Answer 2

我在下面的代碼中嘗試了它的工作正常。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<button class="btn btn-success" id="search"><span class="glyphicon glyphicon-search"></span> Search</button>
<div class="row text-center" style="margin-top: 50px;">
        <div class="col-md-12">
            <div id="content-area"></div>
        </div>
    </div>
<script>
    $("#search").click(function(){
    $("#content-area").load("test1.php");
});
</script>