我有以下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>
我想加载一个页面.php在 #content 区域内。这是我用于此的jQuery:
$("#search").click(function(){
$("#content-area").load("page.php");
});
问题是页面.php没有在 #content 区域内加载,但它本身作为新页面加载。我希望页面.php加载到 #content 区域内。请帮忙。
//您必须进行 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);
}
});
});
我已经尝试了下面的代码,它对我来说工作正常。
<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>