The Load method and example of jquery Ajax

The Load method in jquery:

(1). There is no jquery in front of it. Modifier, you can infer that he is a normal non-global function (that is, a local function): $.,$ (). jquery, such as the modified is a global function, without these modifications is a local function.

(2). $ (expr). Load (url,data,callback);

URL: Request path, absolute path, or relative path.

Data: Request parameters, format must be in Key/value format (JSON format)

Callback: callback function. function (data,textstatus,xmlhttprequest) data: Represents the request return content Textstatus: Represents request status Succuss, error, notmodify, timeout 4 kinds The Xmlhttprequest:xmlhttprequest object

(3). By default, the load () method is a GET request when no request data is sent to the server, or a POST request

(4) If there is a request parameter. Load () cannot customize the request type, but instead sends the request data to the server side .  load () cannot customize the data interchange format, only text (HTML) format


case:

load.html page

<!
doctype html public  "-//w3c//dtd html 4.01 transitional//en" > 


load.jsp


<%@ page language= "java" pageencoding= "UTF-8"%>
<%
("System.out.println Server Connection");    
System.out.println (Request.getmethod ())//Get request parameter Type
System.out.println ("username =" +    Request.getparameter ("username"))//Get request parameter
System.out.println ("Password =" +request.getparameter ("PSW"));
out.println ("helloworld!");
%>


Browser display:




 

Console display:




 



jquery's Ajax load () application Example

There are get,post,ajax in jquery Ajax and what we are going to talk about in this article load,load can directly load the page and other differences, let me introduce the AJAX load usage example.

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

1. Load a php file, the PHP file does not contain pass parameters
$ ("#myID"). Load ("test.php");

Import test.php Run results in an 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 the following: Test.php?name=adam

3. Load a PHP file that contains multiple pass parameters. Note: The parameters are separated by commas

$ ("#myID"). Load ("test.php", {"name": "Adam", "Site": "61dh.com"});

The imported PHP file contains a pass-through parameter, similar to the following: test.php?name=adam&site=61dh.com

4. Load a php file, the php file with an array as the passing parameters

$ ("#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:

$ ("#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:

<! 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:

<?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.