Ajax load is just one of the common usage of jquery ajax. load can be very simple and fast to load or submit a parameter processed by php or other script programs, here is an example of load usage.
For example, in the following iplaysoft website, this part of the function .?
You can also take a look at the small
| The Code is as follows: | Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </Head> <Body> <H3> Ajax load <small> paperen </small> <Div id = "ajaxload"> </Body> |
|
Click each tab to view different information. The other must be a CGI File, because it is used to obtain the information that is triggered and changed?
First, introduce the jquery framework.
| The Code is as follows: | Copy code |
<Script language = "javascript" type = "text/javascript" src = "js/jquery. min. js"> </script> |
|
Then, put a div on the index page as the container. You can select the container based on your own needs, rather than using the div, and give it an ID number as a hook. Then write the script directly.
| The Code is as follows: | Copy code |
<Div id = "ajaxload"> |
|
Let's take a look at whether we can load things on the test page. Let's write something like hello on the test page.
As a result, this method can be applied, so we can further expand to implement our functions. Let's take a look at the template above. Of course, you can use your imagination to achieve other effects. The layout of the div in ajaxload is roughly as follows. Of course, because the content of the entire div is from the test page, you just need to put the upper and lower frames in the test page .?
| The Code is as follows: | Copy code |
<Div id = "hello"> |
|
Then write the php code to extract the database information from the hello div. The nav is displayed as the number of pages (the php code is not released here. There are many comparisons, mainly to read the database information, displays data by PAGE ). For the paging function, write it here. I still write paperen so far .?
| The Code is as follows: | Copy code |
$ Each = 5; // defines the number of data displayed on each page |
|
Use a for loop to display the page number, because the total page number $ pagenum is known.
| The Code is as follows: | Copy code |
| <Ul class = "nav"> <? Php For ($ I = 1; $ I <= $ pagenum; $ I ++ ){ ?> <Li> <a href = "javascript: void (0);"> </a> </li> <? Php } ?> </Ul> <Div class = "c"> </div> |
|
Write css to beautify the page. The result is as follows .?
The last step is the implementation of the interaction function, that is, when we click the orange dot, the above information will change, which is also a key point, I don't know if you have any ideas here. paperen I think you should first check whether you can get the elements of the test page on this index page and receive the actions, add a click event for <li> <a href = "javascript: void (0);"> </a> </li>
Test again to see if it works.
Sure enough. You can do it now. You can use a function to process the click event of this hyperlink and add some scripts to the index page.
| The Code is as follows: | Copy code |
<Li> <a href = "javascript: void (0);" onClick = "nextpage (<? = $ I?>) "> </A> </li> |
|
Note that the load event uses the post method to transmit data, that is, why to use $ _ POST on the test page to receive the page variable .?
This is really a good front-end effect. You can try it on your own. In fact, the simplest thing you have read is $ ("# ajaxload "). load ("test. php ", {'page': page}); it can be solved. It is more convenient to get than post.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
