Jquery学习笔记 --ajax删除用户，使用了js原生ajax

主要复习了php的pdo数据库操作，和js的ajax，真麻烦，希望jquery的ajax简单点。

index.php:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="jquery.js"></script>
 7 </head>
 8 <body>
 9     <form action="regist.php" method="get">
10         <span>用户名</span>
11         <input type="text" name="username">
12         <span>用户名重复</span>
13         <br>
14         <br>
15         <span>密码</span>
16         <input type="text" name="password">
17         <br>
18         <input type="submit" value="提交">
19     </form>
20     <table border="1px" cellspacing="0">
21         <tr>
22             <td>id</td>            
23             <td>用户名</td>            
24             <td>密码</td>            
25         </tr>
26         <?php 
27             $pdo = new PDO("mysql:host=localhost;dbname=userlist","root","jia6181813");
28             $sql = "SELECT * FROM users";
29             $obj = $pdo->query($sql);
30             while($row=$obj->fetch()){
31                 echo "<tr>";
32                 echo "<td>$row[id]</td>";
33                 echo "<td>$row[name]</td>";
34                 echo "<td>$row[password]</td>";
35                 echo "<td><a href='javascript:' name='$row[id]'>删除</a></td>";
36                 echo "</tr>";
37             }
38             
39          ?>
40     </table>
41 </body>
42 <script>
43     $('a').click(function(){
44         //这个地方点击删除的a链接，取得里面name属性的id值，用来xhr.open里面的url。如果不这么做，就得循环遍历所有a链接，还要添加一个存放id的类，具体参考php里的ajax操作。
45         var id = $(this).attr('name');
46         var xhr = new XMLHttpRequest();
47         xhr.open("get","delete.php?id="+id,true);
48         xhr.send();
49         //that的运用，因为在下面的函数里面$(this)已经变了
50         var that = $(this);
51         xhr.onreadystatechange = function(){
52             if (xhr.readyState==4) {
53                 r = xhr.responseText;
54                 if (r=='1') {
55                     that.parent().parent().hide();
56                 }else{
57                     alert(123);
58                 }
59             }
60         }
61     });
62 </script>
63 </html>

delete.php:

 1 <?php 
 2     $id = $_GET[id];
 3     $pdo = new PDO("mysql:host=localhost;dbname=userlist","root","123");
 4     $sql = "DELETE FROM users WHERE id = $id";
 5     // $pdo->query($sql);
 6     if ($pdo->query($sql)) {
 7         //这里是echo，不是return！！
 8         echo 1;
 9     }else{
10         echo 0;
11     }
12     //后面这句不能要啦！不然输出就不是1了，后面跟了一串。。。
13     // echo "<script>location='index.php'</script>";
14  ?>
转载

相关阅读:
011 Vue _Object.defineProperty
JavaScript中in操作符
 009el与data的两种写法
 ES6中的数组reduce()方法
 Vue中有两种数据绑定的方式：
012 Vue 理解数据代理
 【angular基础教程】引入jQuery
014 Vue中的事件处理
 010理解MVVM
013 Vue中的数据代理
原文地址：https://www.cnblogs.com/lianzhibin/p/6241739.html