使用php和javascript帮助更改页面上的内容

Question

So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.

So let's say I have an option (all) and an option (only this) The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.

For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.

((Sorry if is not clear but the facebook example should be clear enough))

Answer 1

What you're talking about is ajax .

I would suggest a javascript library to help leverage this, like jquery .

It can be as cool as

  $.post('serverScript.php',
         function(data) {
              $('#idOfDivToUpdate').html(data); //shove script data into div
         },'html' ); 

tutorial .

Answer 2

Whatyou are looking for a is AJAX/PHP approach.

• Clicking on the tab
• The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
• The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
• The server sends back the code. This can be HTML, JSON, XML or similar.
• You script recieves the answer, may "do" something with it (like some parsing or similar)
• The content will be placed on the page (again, this is possible due to an unique "id"

This is basically the way it is done.

Check out the different JavaScript frameworks. They all come with nice AJAX support:

• jQuery
• MooTools
• dojo
• Prototype

And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php