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>