jquery-12 jquery的ajax如何使用

一、总结

一句话总结：就是$.get()和$.post()方法的使用，看参考手册就好，与php的交互。

1、删除元素的时候如何设置删除特效？

animate()自定义或者slide和fade系列方法

 9             obj.parent().parent().fadeOut(100);

2、$.get()方法如何接收从后台返回来的数据？

callback:载入成功时回调函数。里面的参数，比如下面的r，php后台返回1表示删除成功。

50     $.get('delete.php',{id:id},function(r){
51         if(r=='1'){
52             obj.parent().parent().fadeOut(100);
53         }
54     });

3、$.post()方法和$.get()方法区别明显么？

用户几乎一模一样，不熟悉的时候去看参考手册

50     $.get('delete.php',{id:id},function(r){

 7     $.post('delete.php',{id:id},function(r){

4、jquery中方法中的参数中的回调函数怎么用？

就是一个匿名函数，只不过带参数，参数是从后台返回的而已。

callback:载入成功时回调函数。

50     $.get('delete.php',{id:id},function(r){
51         if(r=='1'){
52             obj.parent().parent().fadeOut(100);
53         }
54     });

二、jquery的ajax如何使用

1、ajax get请求

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>用户管理:</h1>
15     <?php 
16     //用php去数据库获取数据
17     $pdo=new PDO('mysql:host=localhost;dbname=test','root','123');
18     $pdo->exec('set names utf8');
19 
20     $sql="select * from user";
21     $smt=$pdo->query($sql);
22     $rows=$smt->fetchAll(PDO::FETCH_ASSOC);
23     ?>
24     <table width='1000px' border='1px' cellspacing='0'>
25         <tr>
26             <th>ID</th>
27             <th>用户名</th>
28             <th>密码</th>
29             <th>删除</th>
30         </tr>
31         <?php 
32         foreach($rows as $row){
33             echo "<tr>";
34             echo "<td>{$row['id']}</td>";
35             echo "<td>{$row['username']}</td>";
36             echo "<td>{$row['password']}</td>";
37             echo "<td><a href='javascript:' class='del' id='{$row['id']}'>删除</a></td>";
38             echo "</tr>";
39         }
40         
41          ?>
42     </table>
43 </body>
44 <script>
45 $('.del').click(function(){
46     id=this.id;
47     obj=$(this);
48 
49     //ajax通讯
50     $.get('delete.php',{id:id},function(r){
51         if(r=='1'){
52             obj.parent().parent().fadeOut(100);
53         }
54     });
55 });
56 </script>
57 </html>

2、ajax post请求

 1 <script>
 2 $('.del').click(function(){
 3     id=this.id;
 4     obj=$(this);
 5 
 6     //ajax通讯
 7     $.post('delete.php',{id:id},function(r){
 8         if(r=='1'){
 9             obj.parent().parent().fadeOut(100);
10         }
11     });
12 });
13 </script>