jquery's Ajax Load () application example

Source: Internet
Author: User

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?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.