/ / jQuery लोड फ़ंक्शन एक div के अंदर लोड नहीं कर रहा है लेकिन नए पृष्ठ को लोड करता है - php, jquery, html

jQuery लोड फ़ंक्शन एक div के अंदर लोड नहीं हो रहा है लेकिन नया पृष्ठ लोड करता है - php, jquery, html

मेरे पास 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>

मैं # सामग्री-क्षेत्र के अंदर एक पेज लोड करना चाहता हूं। यह वह jQuery है जिसका मैंने इसके लिए उपयोग किया है:

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

समस्या यह है कि पृष्ठ.php # सामग्री-क्षेत्र के अंदर लोड नहीं हो रहा है, बल्कि यह एक नए पृष्ठ के रूप में लोड होता है। मैं # सामग्री-क्षेत्र के अंदर लोड करने के लिए page.php चाहता हूं। कृपया मदद कीजिए।

उत्तर:

उत्तर № 1 के लिए 1

// आपको पेज लोड किए बिना सामग्री प्राप्त करने के लिए अजाक्स कॉल करना होगा।

$("#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);
}
});
});

जवाब के लिए 0 № 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>