ajax交互案例

程序员文章站 2023-04-02 11:43:49

数据交互是前端很重要的一部分，静态页是基础，而交互才是网页的精髓。交互又分为人机交互和前后端数据交互，现阶段的互联网下，大部分的网站都要进行前后端数据交互，如何交互呢？交互的流程大概就是前端发送数据给后端，后端接送数据，进行处理，将处理后的结果发送给前端，前端接受数据。前端和后端的收和发通过什么呢？ ......

前端通过表单和ajax发送数据，接受只能通过ajax；后端(php)通过$_get[]、$_post[]、$_request[]接收，打印语句来发送：echo、print、print_r()、die()

ajax是前后端交互的重要手段，ajax的全称是asynchronous javascript and xml（异步javascript和xml）；

这么说可能也感受不出什么，案例来感受下吧！

首先我们要准备下页面布局，布局用到了bootstrap的模态框，可以自己百度看下哈！

 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <link rel="stylesheet" href="libs/bootstrap.css">
 9     <title>document</title>
10 </head>
11 
12 <body>
13     <div class="container">
14         <div class="row align-items-center">
15             <div class="col-2 h1">logo</div>
16             <div class="col-2 h4">学生信息系统</div>
17             <button type="button" class="btn btn-primary col-1" data-toggle="modal" data-target="#examplemodal"
18                 data-whatever="@mdo" id="insert">添加信息</button>
19         </div>
20         <div class="row my-5">
21             <table class="table table-bordered thead-default table-sm">
22                 <thead>
23                     <tr>
24                         <th>id</th>
25                         <th>name</th>
26                         <th>machine</th>
27                         <th>examination</th>
28                         <th>delete</th>
29                         <th>update</th>
30                     </tr>
31                 </thead>
32                 <tbody>
33                     <!-- <tr>
34                         <td>1</td>
35                         <td>admin</td>
36                         <td>23</td>
37                         <td>87</td>
38                         <td><span class="btn btn-primary btn-info" ly="delete">删除</span></td>
39                         <td><button type="button" class="btn btn-primary btn-info" data-toggle="modal"
40                             data-target="#examplemodal" data-whatever="@fat" ly="update">修改</button></td>
41                     </tr> -->
42                 </tbody>
43             </table>
44         </div>
45         <div class="row">
46             <nav aria-label="page navigation example" class="w-100">
47                 <ul class="pagination pagination-sm justify-content-center">
48                     <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
49                     <li class="page-item"><a class="page-link" href="#">1</a></li>
50                     <li class="page-item"><a class="page-link" href="#">2</a></li>
51                     <li class="page-item"><a class="page-link" href="#">3</a></li>
52                     <li class="page-item"><a class="page-link" href="#">下一页</a></li>
53                 </ul>
54             </nav>
55         </div>
56     </div>
57     <div class="modal fade" id="examplemodal" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel">
58         <div class="modal-dialog" role="document">
59             <div class="modal-content">
60                 <div class="modal-header">
61                     <h4 class="modal-title" id="examplemodallabel">请输入信息：</h4>
62                     <button type="button" class="close" data-dismiss="modal" aria-label="close"><span
63                             aria-hidden="true">&times;</span></button>
64                 </div>
65                 <div class="modal-body">
66                     <form>
67                         <div class="form-group">
68                             <label for="recipient-name" class="control-label">姓名:</label>
69                             <input type="text" class="form-control" id="name">
70                         </div>
71                         <div class="form-group">
72                             <label for="message-text" class="control-label">机试:</label>
73                             <input class="form-control" id="cpt" />
74                         </div>
75                         <div class="form-group">
76                             <label for="message-text" class="control-label">笔试:</label>
77                             <input class="form-control" id="pen" />
78                         </div>
79                     </form>
80                 </div>
81                 <div class="modal-footer">
82                     <button type="button" class="btn btn-primary mx-auto" data-dismiss="modal" id="send">提交</button>
83                 </div>
84             </div>
85         </div>
86     </div>
87 </body>
88 <script src="libs/jquery-2.2.4.js"></script>
89 <script src="libs/popper.js"></script>
90 <script src="libs/bootstrap.js"></script>
91 <script src="js/ajax.js"></script>
92 <script src="js/index.js"></script>
93 </html>

接下来就是js了，其实交互就是增删改查。先来看下查。

; (function () {
 2     class project {
 3         constructor() {
 4             // 获取元素
 5             this.tbody=document.queryselector("tbody");
 6             this.addbtn=document.queryselector("#insert");
 7             this.submit=document.queryselector("#send");
 8             this.name = document.getelementbyid("name");
 9             this.cpt = document.getelementbyid("cpt");
10             this.pen = document.getelementbyid("pen");
11             // console.log(this.addbtn);
12             this.selecturl = "http://localhost/test/project/php/select.php";
16             this.select();
17     　　}   
18          select() {
19             var that = this;
20             ajax({
21                 url: this.selecturl,
22                 success: function (res) {
23                     // console.log(res);
24                     that.res = json.parse(res);
25                     if (that.res.code) {
26                         alert(that.res.msg);
27                     } else {
28                         // console.log(that.res);
29                         that.display();
30                     }
31                 }
32             });
33         }
34     display() {
35             // console.log(this.res.length);
36             var str = "";
37             for (var i = 0; i < this.res.length; i++) {
38                 str += `<tr>
39                 <td>${this.res[i].id}</td>
40                 <td>${this.res[i].name}</td>
41                 <td>${this.res[i].machine}</td>
42                 <td>${this.res[i].examination}</td>
43                 <td><span class="btn btn-primary btn-info" ly="delete">删除</span></td>
44                 <td><button type="button" class="btn btn-primary btn-info" data-toggle="modal"
45                     data-target="#examplemodal" data-whatever="@fat" ly="update">修改</button></td>
46             </tr> `
47             }
48             this.tbody.innerhtml=str;
49         }
50     }
51     new project();
52 })();

上面的是js部分的代码，封装了ajax所以我直接调用了。再看下php的部分吧！

 1 <?php
 2     $link=@new mysqli("localhost:3306","root","root","test");
 3     if($link->connect_error){
 4         $err = array("code"=>1,"msg"=>$link->connect_error);
 5         die(json_encode($err));
 6     }
 7     $select="select * from stu";
 8     $res=$link->query($select);
 9     if($res){
10         $str="";
11         while ($arr=$res->fetch_assoc()) {
12            $str=$str.json_encode($arr).",";
13         }
14         die ("[".substr($str,0,-1)."]");
15     }else{
16         $err = array("code"=>2,"msg"=>"失败");
17         die(json_encode($err));
18     }
19 ?>

刷新页面的时候就会自动获取数据库中的数据渲染到页面上。再是添加和修改数据，因为使用了一个模态框，所以同时写，因为模态框中的提交按钮需判断是添加按钮触发的还是修改按钮触发的，就需要一个标识。同上，代码感受！

  1 ; (function () {
  2     class project {
  3         constructor() {
  4             // 获取元素
  5             this.tbody=document.queryselector("tbody");
  6             this.addbtn=document.queryselector("#insert");
  7             this.submit=document.queryselector("#send");
  8             this.name = document.getelementbyid("name");
  9             this.cpt = document.getelementbyid("cpt");
 10             this.pen = document.getelementbyid("pen");
 11             // console.log(this.addbtn);
 12             this.selecturl = "http://localhost/test/project/php/select.php";
 13             this.inserturl="http://localhost/test/project/php/insert.php";
 14             this.updateurl="http://localhost/test/project/php/update.php";
 15             
 16 
 17             this.type=0;
 18             this.select();
 19             this.addevent();
 20         }
 21         select() {
 22             var that = this;
 23             ajax({
 24                 url: this.selecturl,
 25                 success: function (res) {
 26                     // console.log(res);
 27                     that.res = json.parse(res);
 28                     if (that.res.code) {
 29                         alert(that.res.msg);
 30                     } else {
 31                         // console.log(that.res);
 32                         that.display();
 33                     }
 34                 }
 35             });
 36         }
 37         addevent(){
 38             var that=this;
 39             this.addbtn.addeventlistener("click",function(){
 40                 that.type=0;
 41             });
 42             this.tbody.addeventlistener("click",function(eve){
 43                 var e = eve || window.event;
 44                 that.target = e.target || e.srcelement;
 45                 if(that.target.getattribute("y") === "update"){
 46                     that.type = 1;
 47                     that.id=that.target.parentnode.parentnode.children[0].innerhtml;
 48                     that.name.value=that.target.parentnode.parentnode.children[1].innerhtml;
 49                     that.cpt.value=that.target.parentnode.parentnode.children[2].innerhtml;
 50                     that.pen.value=that.target.parentnode.parentnode.children[3].innerhtml;
 51                 }
 52             });
 53             this.submit.addeventlistener("click",function(){
 54                 that.n=that.name.value;
 55                 that.c=that.cpt.value;
 56                 that.p=that.pen.value;
 57                 if(that.type==0){
 58                     that.name.value=that.cpt.value=that.pen.value="";
 59                     that.insertload();
 60                 }else{
 61                     // console.log();
 62                    that.updateload();
 63                 }
 64             })
 65         }
 66         insertload(){
 67             var that=this;
 68             ajax({
 69                 url:this.inserturl,
 70                 data:{
 71                     name:this.n,
 72                     cpt:this.c,
 73                     pen:this.p
 74                 },
 75                 success:function(res){
 76                     // console.log(res);
 77                     that.res=json.parse(res);
 78                     if(that.res.code){
 79                         alert(that.res.msg);
 80                     }else{
 81                         that.display();
 82                     }
 83                 }
 84             });
 85         }
 86         updateload(){
 87             var that=this;
 88             ajax({
 89                 url:this.updateurl,
 90                 data:{
 91                     id:this.id,
 92                     name:this.n,
 93                     cpt:this.c,
 94                     pen:this.p
 95                 },
 96                 success:function (res) {
 97                     that.res=json.parse(res);
 98                     if(that.res.code){
 99                         alert(that.res.msg);
100                     }else{
101                         that.display();
102                     }
103                 }
104             })
105         }
106         display() {
107             // console.log(this.res.length);
108             var str = "";
109             for (var i = 0; i < this.res.length; i++) {
110                 str += `<tr>
111                 <td>${this.res[i].id}</td>
112                 <td>${this.res[i].name}</td>
113                 <td>${this.res[i].machine}</td>
114                 <td>${this.res[i].examination}</td>
115                 <td><span class="btn btn-primary btn-info" ly="delete">删除</span></td>
116                 <td><button type="button" class="btn btn-primary btn-info" data-toggle="modal"
117                     data-target="#examplemodal" data-whatever="@fat" ly="update">修改</button></td>
118             </tr> `
119             }
120             this.tbody.innerhtml=str;
121         }
122     }
123     new project();
124 })();

下面是添加按钮所对应的的php代码！

 1 <?php
 2     $link=@new mysqli("localhost:3306","root","root","test");
 3     if($link->connect_error){
 4         $err = array("code"=>1,"msg"=>$link->connect_error);
 5         die(json_encode($err));
 6     }
 7     $n=@$_request["name"];
 8     $c=@$_request["cpt"];
 9     $p=@$_request["pen"];
10     $insert="insert stu (name,machine,examination) values('".$n."',".$c.",".$p.")";
11     $q=$link->query($insert);
12     if($q){
13        echo select();
14     }else{
15         $err = array("code"=>3,"msg"=>"添加失败");
16         die(json_encode($err));
17     }
18     function select(){
19         global $link;
20         $select="select * from stu";
21         $res=$link->query($select);
22         if($res){
23             $str="";
24             while ($arr=$res->fetch_assoc()) {
25                $str=$str.json_encode($arr).",";
26             }
27             die ("[".substr($str,0,-1)."]");
28         }else{
29             $err = array("code"=>2,"msg"=>"失败");
30             die(json_encode($err));
31         }
32     }
33 ?>

下面是修改按钮所对应的的php代码！

 1 <?php
 2     $link=@new mysqli("localhost:3306","root","root","test");
 3     if($link->connect_error){
 4         $err = array("code"=>1,"msg"=>$link->connect_error);
 5         die(json_encode($err));
 6     }
 7     $id=@$_request["id"];
 8     $n=@$_request["name"];
 9     $c=@$_request["cpt"];
10     $p=@$_request["pen"];
11     $update="update stu set name='".$n."',machine=".$c.",examination=".$p." where id=".$id;
12     $q=$link->query($update);
13     if($q){
14         echo select();
15     }else{
16         $err = array("code"=>3,"msg"=>"添加失败");
17         die(json_encode($err));
18     }
19     function select(){
20         global $link;
21         $select="select * from stu";
22         $res=$link->query($select);
23         if($res){
24             $str="";
25             while ($arr=$res->fetch_assoc()) {
26                $str=$str.json_encode($arr).",";
27             }
28             die ("[".substr($str,0,-1)."]");
29         }else{
30             $err = array("code"=>2,"msg"=>"失败");
31             die(json_encode($err));
32         }
33     }
34 ?>

添加，修改操作完成就是删除，删除是比较简单的，只要获取点击删除的所对应的的数据即可！

  1 ; (function () {
  2     class project {
  3         constructor() {
  4             // 获取元素
  5             this.tbody=document.queryselector("tbody");
  6             this.addbtn=document.queryselector("#insert");
  7             this.submit=document.queryselector("#send");
  8             this.name = document.getelementbyid("name");
  9             this.cpt = document.getelementbyid("cpt");
 10             this.pen = document.getelementbyid("pen");
 11             // console.log(this.addbtn);
 12             this.selecturl = "http://localhost/test/project/php/select.php";
 13             this.inserturl="http://localhost/test/project/php/insert.php";
 14             this.updateurl="http://localhost/test/project/php/update.php";
 15             this.deleteurl="http://localhost/test/project/php/delect.php";
 16 
 17             this.type=0;
 18             this.select();
 19             this.addevent();
 20         }
 21         select() {
 22             var that = this;
 23             ajax({
 24                 url: this.selecturl,
 25                 success: function (res) {
 26                     // console.log(res);
 27                     that.res = json.parse(res);
 28                     if (that.res.code) {
 29                         alert(that.res.msg);
 30                     } else {
 31                         // console.log(that.res);
 32                         that.display();
 33                     }
 34                 }
 35             });
 36         }
 37         addevent(){
 38             var that=this;
 39             this.addbtn.addeventlistener("click",function(){
 40                 that.type=0;
 41             });
 42             this.tbody.addeventlistener("click",function(eve){
 43                 var e = eve || window.event;
 44                 that.target = e.target || e.srcelement;
 45                 if(that.target.getattribute("ly") === "update"){
 46                     that.type = 1;
 47                     that.id=that.target.parentnode.parentnode.children[0].innerhtml;
 48                     that.name.value=that.target.parentnode.parentnode.children[1].innerhtml;
 49                     that.cpt.value=that.target.parentnode.parentnode.children[2].innerhtml;
 50                     that.pen.value=that.target.parentnode.parentnode.children[3].innerhtml;
 51                 }else if(that.target.getattribute("ly") === "delete"){
 52                     that.i=that.target.parentnode.parentnode.children[0].innerhtml;
 53                     that.na=that.target.parentnode.parentnode.children[1].innerhtml;
 54                     that.ma=that.target.parentnode.parentnode.children[2].innerhtml;
 55                     that.ex=that.target.parentnode.parentnode.children[3].innerhtml;
 56                     
 57                     that.deleteload();
 58                 }
 59             });
 60             this.submit.addeventlistener("click",function(){
 61                 that.n=that.name.value;
 62                 that.c=that.cpt.value;
 63                 that.p=that.pen.value;
 64                 if(that.type==0){
 65                     that.name.value=that.cpt.value=that.pen.value="";
 66                     that.insertload();
 67                 }else{
 68                     // console.log();
 69                    that.updateload();
 70                 }
 71             })
 72         }
 73  93 113         deleteload(){
114             var that=this;
115             ajax({
116                 url:this.deleteurl,
117                 data:{
118                     id:this.i,
119                     name:this.na,
120                     cpt:this.ma,
121                     pen:this.ex,
122                 },
123                 success:function(res){
124                     that.res=json.parse(res);
125                     if(that.res.code){
126                         alert(that.res.msg);
127                     }else{
128                         that.display();
129                     }
130                 }
131             })
132         }
133         display() {
134             // console.log(this.res.length);
135             var str = "";
136             for (var i = 0; i < this.res.length; i++) {
137                 str += `<tr>
138                 <td>${this.res[i].id}</td>
139                 <td>${this.res[i].name}</td>
140                 <td>${this.res[i].machine}</td>
141                 <td>${this.res[i].examination}</td>
142                 <td><span class="btn btn-primary btn-info" ly="delete">删除</span></td>
143                 <td><button type="button" class="btn btn-primary btn-info" data-toggle="modal"
144                     data-target="#examplemodal" data-whatever="@fat" ly="update">修改</button></td>
145             </tr> `
146             }
147             this.tbody.innerhtml=str;
148         }
149     }
150     new project();
151 })();

删除的php代码！

 1 <?php
 2     $link=@new mysqli("localhost:3306","root","root","test");
 3     if($link->connect_error){
 4         $err = array("code"=>1,"msg"=>$link->connect_error);
 5         die(json_encode($err));
 6     }
 7     $id=@$_request["id"];
 8     $n=@$_request["name"];
 9     $c=@$_request["cpt"];
10     $p=@$_request["pen"];
11     $delete="delete from stu where id=".$id;
12     $q=$link->query($delete);
13     if($q){
14         echo select();
15     }else{
16         $err = array("code"=>3,"msg"=>"添加失败");
17         die(json_encode($err));
18     }
19     function select(){
20         global $link;
21         $select="select * from stu";
22         $res=$link->query($select);
23         if($res){
24             $str="";
25             while ($arr=$res->fetch_assoc()) {
26                $str=$str.json_encode($arr).",";
27             }
28             die ("[".substr($str,0,-1)."]");
29         }else{
30             $err = array("code"=>2,"msg"=>"失败");
31             die(json_encode($err));
32         }
33     }
34 ?>

以上就是交互案例的所有代码了，可以看看，感受下是怎么一回事吧！其实只要理清之间的关系即可，我们做的只是将数据发送给后端并接受后端返回的数据即可！

上一篇： Docker的学习1

下一篇：广州酒家月饼价格是多少？不是你想象中的价格

ajax交互案例

Android图片加载案例分享

ajax异步请求详解

jQuery ajax的功能实现方法详解

Android音频可视化开发案例说明

Android Service(不和用户交互应用组件)案例分析

Android拨号盘支持T9搜索和号码搜索等拨号盘案例

Android中Retrofit 2.0直接使用JSON进行数据交互

HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例

cdr轮廓图（交互式轮廓图）工具怎么使用?

Ajax实现不刷新取最新商品

ajax交互案例

Android图片加载案例分享

ajax异步请求详解

jQuery ajax的功能实现方法详解

Android音频可视化开发案例说明

Android Service(不和用户交互应用组件)案例分析

Android拨号盘 支持T9搜索和号码搜索等拨号盘案例

Android中Retrofit 2.0直接使用JSON进行数据交互

HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例

cdr轮廓图（交互式轮廓图）工具怎么使用?

Ajax实现不刷新取最新商品

Android拨号盘支持T9搜索和号码搜索等拨号盘案例