[英]jQuery Load function not loading inside a div but loads new page
I have following html markup: 我有以下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>
I want to load a page.php inside #content-area. 我想在#content-area内加载page.php。 This is the jQuery I used for this:
这是我为此使用的jQuery:
$("#search").click(function(){
$("#content-area").load("page.php");
});
The problem is page.php is not loading inside #content-area but it loads as a new page itself. 问题是page.php不在#content-area内部加载,但它本身作为新页面加载。 I want page.php to load inside #content-area.
我希望page.php加载到#content-area中。 Please help.
请帮忙。
//you have to make ajax call to get content without page load. //您必须进行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);
}
});
});
I have tried below code its working fine for me. 我在下面的代码中尝试了它的工作正常。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.