In jquery ajax, get, post, ajax, and load, which we will talk about in this article, can be used to load pages directly, which is different from other methods. Next I will introduce the ajax load usage example.
The complete format for calling the load method is: load (url, [data], [callback]), where
Url: the address of the file to be imported.
Data: an optional parameter. Because Load can not only import static html files, but also dynamic scripts, such as PHP files, when importing dynamic files, we can put the parameters to be passed here.
Callback: an optional parameter. It is another function that is executed after the load method is called and the server response is obtained.
I. How to use data
| The Code is as follows: | Copy code |
1. Load a PHP file without passing parameters. // Import the result after test. php is run in the element whose id is # myID 2. Load a PHP file that contains a passing Parameter $ ("# MyID"). load ("test. php", {"name": "Adam "}); // The imported php file contains a passing parameter, similar to: test. php? Name = Adam 3. Load a PHP file that contains multiple passing parameters. Note: parameters are separated by commas (,). $ ("# MyID"). load ("test. php", {"name": "Adam", "site": "61dh.com "}); // The imported php file contains a passing parameter, similar to: test. php? Name = Adam & site = 61dh.com 4. Load a PHP file. The php file uses an array as the transmission parameter. $ ("# MyID"). load ("test. php", {'myinfo [] ', ["Adam", "61dh.com"]}); // The imported PHP file contains an array for passing parameters. |
|
Note: using load, these parameters are passed in POST mode. Therefore, GET parameters cannot be obtained in test. php.
Ii. How to Use callback
For example, you can use the callback function to slowly display the loaded content after the load method obtains the server response. The Code is as follows:
| The Code is as follows: | Copy code |
$ ("# Go"). click (function (){ $ ("# MyID"). load ("welcome. php", {"lname": "Cai", "fname": "Adam", function (){ $ ("# MyID"). fadeIn ('low ');} ); }); |
|
To put it simply, ajax simulates the form submission behavior, but it secretly completes page refreshing by js in the background.
It can be seen that ajax is a very easy process to understand. The following example shows how to use ajax. First, write an html page:
| The Code is as follows: | Copy code |
<! DOCTYPE html> |
|
A little html-based shoes show that three buttons are made here, one div with an id of out, and the three buttons are used for clicking. # The out div is used to receive data, # out is cleared every time you click the button, and information is inserted.
Then write php:
| The Code is as follows: | Copy code |
<? Php |
|
This Code uses the php switch statement, which means to replace the output content based on the name value in post. Here is just a simple example, you can also use this principle to make php perform more complex operations or output more complex content.
Js I wrote it directly in html. I didn't use a single file. I wrote a lot of estimates using pure js. I can do it in just two sentences using jQuery. In fact, I can do it all, it's just a bit easier for me to write two sentences here.
The first sentence is the name value in the button contains a variable. The second sentence is to use the jQuery load function to tell php what information is needed and then retrieve the information and insert it into # out.
This is how ajax is done. Is it simple?
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
