jQuery 实现Ajax

浏览数：46 / 时间：2015年06月09日

一、load()方法，从服务器加载数据，并把返回的数据放入被选元素中。是局部方法,必须给定主体；

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。发送方式默认为get,存在该参数时变为post；

可选的 callback 参数是 load() 方法完成后所执行的函数名称。它包含三个参数：

　　——responseTxt - 包含调用成功时的结果内容、 statusTXT - 包含调用的状态、 xhr - 包含 XMLHttpRequest 对象

二、get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。是全局方法

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

callback它有俩个参数:data回调参数存有被请求页面的内容，status回调参数存有请求的状态

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。俩个参数同上；

实例：

后台数据库数据：

id	FirstName	LastName	Age	Hometown	Job
1	Peter	Griffin	41	Quahog	Brewery
2	Lois	Griffin	40	Newport	Piano Teacher
3	Joseph	Swanson	39	Quahog	Police Officer
4	Glenn	Quagmire	41	Quahog	Pilot

HTML:

 1  1 <html>
 2  2 <head>
 3  3 <script src=‘jquery.min‘ type=‘text/javascript‘></script>
 4  4 <script>
 5  5     
 6  6 </script>
 7  7 </head>
 8  8 <body>
 9  9 
10 10 <form>
11 11 <select name="users" onchange="showUser(this.value)">
12 12 <option value="">Select a person:</option>
13 13 <option value="1">Peter</option>
14 14 <option value="2">Lois</option>
15 15 <option value="3">Glenn</option>
16 16 <option value="4">Joseph</option>
17 17 </select>
18 18 </form>
19 19 <br>
20 20 <div id="txtHint"><b>Person info will be listed here.</b></div>
21 21 
22 22 </body>
23 23 </html>

View Code

PHP：

 1 <?php
 2 $q=$_POST["q"];  //发送方式为get时，用$_GET(‘q‘)接收
 3 
 4 
 5 
 6 $con = mysql_connect(‘localhost‘,‘root‘,‘yangfan‘);
 7 if (!$con){
 8     die(‘Could not connect: ‘ . mysql_error());
 9 }
10 
11 if(!mysql_select_db("ajax test")){
12     echo mysql_error();
13 };
14 
15 
16 $sql="SELECT * FROM idcard WHERE id = $q";
17 $result = mysql_query($sql);
18 // $row = mysql_fetch_array($result);
19 // print_r($row);
20 echo "<table border=‘1‘>
21 <tr>
22 <th>Firstname</th>
23 <th>Lastname</th>
24 <th>Age</th>
25 <th>Hometown</th>
26 <th>Job</th>
27 </tr>";
28 
29 while($row = mysql_fetch_array($result)){
30 
31     echo "<tr>";
32     echo "<td>" . $row[‘FirstName‘] . "</td>";
33     echo "<td>" . $row[‘LastName‘] . "</td>";
34     echo "<td>" . $row[‘Age‘] . "</td>";
35     echo "<td>" . $row[‘Hometown‘] . "</td>";
36     echo "<td>" . $row[‘Job‘] . "</td>";
37     echo "</tr>";
38 }
39  echo "</table>";
40 
41 ?>

View Code

load()方法：get方式

 1 function showUser(str){
 2         $(‘#txtHint‘).load(‘demo.phpq=‘+str,function(responseTxt,statusTXT,xhr){
 4             if(statusTXT=="error"){
 5                 alert("Error: "+xhr.status+": "+xhr.statusText)
 6             }
 7             if(statusTXT=="success"){
 8                  alert(‘success!‘)
 9             }
10 
11         })
12 }

load()方法：post方式:

function showUser(str){
        $(‘#txtHint‘).load(‘demo.php‘,{q:str},function(){
            if(statusTXT=="error"){
                alert("Error: "+xhr.status+": "+xhr.statusText)
            }
        })
    }

get()方法：

 1 function showUser(str){
 2         $.get(‘demo.php?q=‘+str,function(data, status){
 3              if(status==‘error‘){
 4                  alert(‘失败‘)
 5             }else{
 6                 $(‘#txtHint‘).html(data);
 7             }
 8             
 9          });
10 
11      }

post()方法：

1 function showUser(str){
2         $.post(‘demo.php‘,{q:str},function(data, status){
3             $(‘#txtHint‘).html(data);
4         });
5 
6     }