ajax交互案例

来源:https://www.cnblogs.com/ruo-shui-yi-fang/archive/2019/09/13/11512390.html
-Advertisement-
Play Games

數據交互是前端很重要的一部分,靜態頁是基礎,而交互才是網頁的精髓。交互又分為人機交互和前後端數據交互,現階段的互聯網下,大部分的網站都要進行前後端數據交互,如何交互呢?交互的流程大概就是前端發送數據給後端,後端接送數據,進行處理,將處理後的結果發送給前端,前端接受數據。前端和後端的收和發通過什麼呢? ...


數據交互是前端很重要的一部分,靜態頁是基礎,而交互才是網頁的精髓。交互又分為人機交互和前後端數據交互,現階段的互聯網下,大部分的網站都要進行前後端數據交互,如何交互呢?交互的流程大概就是前端發送數據給後端,後端接送數據,進行處理,將處理後的結果發送給前端,前端接受數據。前端和後端的收和發通過什麼呢?

前端通過表單和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 ; (	   

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.什麼是url? ​ 2.什麼是html? 3.什麼是http? 4.url html http 之間的關係? 5.http的工作原理 https://blog.csdn.net/hguisu/article/details/8680808 6.當用戶在瀏覽器輸入功能變數名稱後,會發生哪些操作? dns ...
  • .clearFloat::after { content: ""; height: 0; display: block; clear: both; visibility: hidden; } .clearFloat { zoom: 1; } 選擇發行版 對於發行版的選擇可以參考這個網站(http:/ ...
  • 1.下載Docker Toolbox 下載地址:http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 2.安裝Docker Toolbox 一直next 3.win+r打開control查看 確保這個關閉,不勾 打開任務管理 ...
  • 範例:配置Yum倉庫 Yum軟體倉庫的作用是為了進一步簡化RPM管理軟體的難度以及自動分析所需軟體包及其依賴關係的技術。可以把Yum想象成是一個碩大的軟體倉庫,裡面保存有幾乎所有常用的工具,而且只需要說出所需的軟體包名稱,系統就會自動為您搞定一切。 搭建並配置Yum軟體倉庫的大致步驟如下所示: 第1 ...
  • 五、Linux 下獲取幫助 沒必要記住所有東西 Linux 提供了極為詳細的幫助工具及文檔,一定要養成查幫助文檔的習慣,可以大大減少需要記憶的東西並且提高效率 5.1、HELP 幾乎所有命令都可以使用 h 或 help 參數獲取使用方法、參數信息等。 5.2、MAN man 命令是 Linux 中最 ...
  • 桌面指令(cmd)進入mysql客戶端 第一步:安裝mysql,配置環境變數 第二步:手動開啟服務 第三步:輸入如下指令: mysql 【-h localhost -P 3306】 -u 用戶名 -p 密碼 相關指令知識: use car; 使用某庫 show databases/ tables; ...
  • 1.確保系統中有依賴的libaio 軟體,如果沒有: yum -y install libaio 2.解壓二進位MySQL軟體包 tar xf mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz -C /usr/local 3.進入/usr/local cd /us ...
  • “處理指令(PIs)允許文檔包含用於應用程式的指令。指令並不是文檔字元數據的一部分,但是必須通過應用程式傳遞”。 處理指令可以用於將信息傳遞給應用程式。處理指令可以出現在文檔任意位置的標記外部。可以出現在序言中,包括文檔的類型定義(DTD),文本內容或者文檔之後。 處理指令,允許文檔中包含由應用程式 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...