The full format of the call load method is: Load (URL, [data], [callback]), where
URL: Refers to the address of the file to be imported.
Data: Optional parameters, because load can not only import static HTML files, but also import dynamic scripts, such as PHP files, so to import the dynamic file, we can put the parameters to pass here.
Callback: optional parameter; is another function that is executed after the Load method is invoked and the server responds.
One: How to use Data
code is as follows |
copy code |
1. Loads a PHP file that does not contain the pass parameter $ ("#myID"). Load ("test.php"); //test.php The results of the run in the element with ID #myid 2. Load a PHP file that contains a pass parameter $ ("#myID"). Load ("test.php", {"name": "Adam"}); The //Imported PHP file contains a pass-through parameter, similar to: Test.php?name=adam 3. Load a PHP file that contains multiple pass parameters. Note: The $ ("#myID") is separated by commas between parameters. Load ("test.php", {"name": "Adam", "Site": "61dh.com"}); The //Imported PHP file contains a pass-through parameter, similar to: test.php?name=adam&site=61dh.com 4. Load a PHP file with an array as the pass parameter $ ("#myID"). Load ("test.php", {' myinfo[] ', ["Adam", "61dh.com"]}); The //Imported PHP file contains an array pass parameter. |
Note: Using load, these parameters are passed as post, so you cannot use get for parameters in test.php.
II: How to use callback
For example, we can use the callback function when the load method gets the server response and slowly displays the loaded content. 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 (' slow '); ); }); |
The simple point is that Ajax simulates the behavior of submitting forms, but the Refresh page this matter to JS in the background secretly completed.
This shows that Ajax is actually a very easy to understand the process, the following examples to illustrate. First write an HTML page:
code is as follows |
copy code |
<! DOCTYPE html> <meta charset= "Utf-8"/> <title>ajax test</ Title> <script type= "Text/javascript" src= "Http://code.jquery.com/jquery-latest.js" ></script> <script type= "Text/javascript" JQuery (function ($) { $ (' button '). Click (function () { $name = $ (this). attr (' name '); $ (' #out '). Empty (). Load (' test1.php ', {name: $name}); }); }); </script> <style type= "Text/css" ></STYLE> <body> < Button id= "btn-1" name= "1" >1</BUTTON> <button id= "Btn-2" name= "2" >2</BUTTON> <button Id= "Btn-3" Name= "3" >3</BUTTON> <div id= "Out" ></DIV> </body> |
There is a little HTML based on the children's shoes can be seen, here to do three buttons, an ID out of the div, three buttons are used to click, #out的div用来接收数据, each click button to first empty the #out, and then insert information.
And then write PHP:
The code is as follows |
Copy Code |
<?php Switch ($_post[' name ']) { Case 1: echo ' 1 haha '; Break Case 2: Echo ' 2 hehe '; Break Case 3: Echo ' 3 alive '; Break } ?> |
This code uses PHP's switch statement, which means that the output is replaced by the value of name in the post, which is just a simple example, and you can use this principle to make PHP more complex or to output more complex content.
JS I wrote directly in the HTML, not a single file, with a pure JS write estimated to write a lot, with jquery on the 2 sentence, in fact, a line, but I here or write two better understanding.
The first one, right? The name value in the button has a variable, and the second sentence uses the jquery load function, tells PHP what information is needed, and then retrieves the information and inserts it into the #out.
So this Ajax is done, is it simple?