I have a header and a main div on my site. How can I create开发者_高级运维 dynamic pages without refreshing the page, by just placing the files from profile.php, search.php and so on inside the main div of my website through using navigation menu?
For example, I have profile.php as the users main interface, and using ?action=action
I have achieved the dynamic pages. But when it comes to search, I have to redirect the user to search.php?query=search-text
and so on for the other pages.
Thanks.
Sounds like you want to do content replacement using AJAX.
Using JQuery you can do
$('#divid').load( "URL" )
Using Javascript and Frames are the only ways to do this without refreshing the header. Frames are considered bad pracice, so AJAX and JQuery are your best option here.
There are several ways to do this.
If you are not using a framework (it looks like you are not) you can just use include/require to bring whole chunks of code into your file (requires a page refresh).
If you are using a framework that supports the MVC structure, then you will just include multiple views to build your response page. The syntax differs between different frameworks, so sorry no example code for you (requires a page refresh).
Also you could use AJAX. Note, AJAX is not a new programming language. It is using Javascript to execute an independent call on the end-user's browser to your server at a special page/handler. The server side handler script then processes your request and returns a snippet of HTML code or a small block of text which is then received by your end-users browser and then dynamically inserted into the DOM (no page refresh).
Cheers.
The only way I know how to achieve this would be requesting content with AJAX and setting the content of your div to being the result - might not be the most ideal (not sure as I've never looked into it) but that's how I would go about it. JQuery would make this easy like so:
function loadPage(pg)
{
var container = $("#container");
$.ajax({
method: "post",
data: "page="+pg,
url: "loadhtml.php",
success: function(result)
{
container.html(result);
}
});
}
精彩评论