ajax交互案例
程序员文章站
2022-05-13 13:25:43
数据交互是前端很重要的一部分，静态页是基础，而交互才是网页的精髓。交互又分为人机交互和前后端数据交互，现阶段的互联网下，大部分的网站都要进行前后端数据交互，如何交互呢？交互的流程大概就是前端发送数据给后端，后端接送数据，进行处理，将处理后的结果发送给前端，前端接受数据。前端和后端的收和发通过什么呢？ ......
数据交互是前端很重要的一部分，静态页是基础，而交互才是网页的精髓。交互又分为人机交互和前后端数据交互，现阶段的互联网下，大部分的网站都要进行前后端数据交互，如何交互呢？交互的流程大概就是前端发送数据给后端，后端接送数据，进行处理，将处理后的结果发送给前端，前端接受数据。前端和后端的收和发通过什么呢？
前端通过表单和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">×</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 ?>
以上就是交互案例的所有代码了，可以看看，感受下是怎么一回事吧！其实只要理清之间的关系即可，我们做的只是将数据发送给后端并接受后端返回的数据即可！
下一篇： 什么场景下用Hbase