jQuery Load 函数未在 div 内加载但加载新页面答案

【问题标题】：jQuery Load function not loading inside a div but loads new pagejQuery Load 函数未在 div 内加载但加载新页面
【发布时间】：2016-03-03 06:15:19
【问题描述】：

我有以下 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 中。请帮忙。

【问题讨论】：

将负载加载到一个变量中，并使用 html() 方法将变量数据分配给 div。
你在做任何类型的搜索吗？为此使用 ajax。
您是否给出了 page.php 的完美路径？请检查一次。
@DeepKakkar 我使用了这个代码$("#search").click(function(){ var loadData = load("populateCustomer.php"); $("#content-area").html(loadData); }); 它仍然加载在一个新页面上，而不是在我的 div 中
w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

标签： php jquery html

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

【讨论】：

是的，使用 ajax 更好...... ki ki ki ki kiran :) @SRK

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

【讨论】：