前端後台的互動的一個實例分享
這一週呢，本K在大神的指導下，完成了一個利用ajax與php檔案上傳處理結合的一個留言板功能的小實例，下面就讓本K來帶大家瞅瞅如何實現這一種功能。
一、介面概覽
#首先我們來看看這個小demo的具體效果。
這個demo中，主要包括了三個步驟，也分別對應了三個功能，分別是#註冊，登入與留言板功能。而這三個功能基本上都藉助了前後台互動的幾種技術，下面，本K就給大家分別展示一下這三個功能實現的程式碼。
二、功能實作
1、註冊功能與登入功能
1.1 程式碼展示
1.1.1 註冊功能
（1）前段部分
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户注册</title><link rel="stylesheet" type="text/css" href="../libs/bootstrap.css?1.1.11"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 350px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -175px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head>
<body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">用户注册</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>用户名</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密码</label><input type="password" class="form-control" name="pwd" /></div><div class="form-group"><label>确认密码</label><input type="password" class="form-control" name="rePwd" /></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="确定注册" id="submit"/> <a type="button" class="btn btn-success" href="login.php"/>返回登录</a></div></form></div></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script type="text/javascript">$(function(){
$("#submit").on("click",function(){var str = $("form").serialize();
console.log(str);
$.post("doReg.php",{"formData":str},function(data){if(data=="true"){
alert("注册成功！即将跳转登陆页！");
location = "login.php";
}else{
alert("注册失败！因为啥我不知道！");
}
});
});
});</script></html>（2）後台部分
<?phpheader("Content-Type:text/html;charset=utf-8"); $str = $_POST["formData"]."[;]"; $num = file_put_contents("user.txt", $str,FILE_APPEND); if($num>0){echo "true";
}else{echo "false";
}（3）使用者資料儲存檔案
userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件，就是后台部分的user.txt
1.1.2 登入功能
（1）前端部分
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>用户登录</title><link rel="stylesheet" type="text/css" href="../libs/bootstrap.css?1.1.11"/><style type="text/css">body{margin: 0px;padding: 0px;background-color: #CCCCCC;}.panel{width: 380px;height: 280px;position: absolute;left: 50%;margin-left: -190px;top: 50%;margin-top: -140px;}.form-horizontal{padding: 10px 20px;}.btns{display: flex;justify-content: center;}</style></head>
<body><div class="panel panel-primary"><div class="panel-heading"><div class="panel-title">用户登录</div></div><div class="panel-body"><form class="form-horizontal"><div class="form-group"><label>用户名</label><input type="text" class="form-control" name="userName"/></div><div class="form-group"><label>密码</label><input type="password" class="form-control" name="pwd"/></div><div class="form-group btns"><input type="button" class="btn btn-primary" value="登录系统" id="submit"/> <a type="button" class="btn btn-success" href="reg.php"/>注册账号</a></div></form></div></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script type="text/javascript">$(function(){
$("#submit").on("click",function(){var str = $("form").serialize();
console.log(str);
$.post("doLogin.php",{"formData":str},function(data){if(data=="true"){
location = "index.php?name="+$("input[name='userName']").val();
}else{
alert("用户名或密码错误！！！");
}
});
});
});</script></html>#（2）後台部分
<?phpheader("Content-Type:text/html;charset=utf-8"); $str = $_POST["formData"]; list($userName) = explode("&", $str);list(,$pwd) = explode("&", $str); $users = file_get_contents("user.txt"); $userArr = explode("[;]", $users); foreach ($userArr as $user) {list($realName) = explode("&", $user);list(,$realPwd) = explode("&", $user);if($userName==$realName&&$pwd==$realPwd){echo "true";die();
}
} echo "false";
1.2 功能詳述
用戶註冊與登入功能的實現的主要依賴有三個，分別是ajax向後台傳遞資料並接受結果，php後台對ajax發來的資料進行後台處理並回饋結果，使用者資料的接收與儲存（這其實可以化作後台處理部分）。
1.2.1 前端詳述
前端部分的主要任務是接收用戶發送的信息並向後台傳遞，而這部分任務的實現主要依靠兩行程式碼。
首先我們來看看ajax發送請求這一部分是如何實現的。這一部分功能的實作主要就依賴兩行程式碼。
第一行程式碼是 var str = $("form").serialize(); 這一行的功能就是將form表單中提交的資料序列化成一字串，具體實作如下圖
將form表單中的提交資料序列化是為了後台能夠更好的解析這一部分。
而另一行關鍵程式碼就是ajax請求的主體部分，這部分主要讓人比較難搞明白的是接受的# data 參數。 data 參數是ajax請求相對應後台處理完成後，後台給前台反饋的一個信息，就比如說註冊成功以後所返回的true與失敗以後所返回的false。
1.2.2 後台詳述
後台對前端傳來資料的處理關鍵在於如何取得、解析傳來的資料。這一部分，PHP給了我們三行程式碼來實作。
第一行程式碼： $str = $_POST["formData"]; 透過超全域陣列$_POST 取得前台傳來的序列化好的字串，這就解決了資料的獲取部分。
第二行程式碼： file_put_contents("user.txt", $str,FILE_APPEND); PHP提供給我們的file_putt_contents()，讓我們可以將我們所獲得的資料儲存到一個文件中長久保留。
第三行程式碼： file_get_contents("user.txt"); 這是PHP提供給我們與file_putt_contents()相對應的資料擷取的方法。
依靠以上三行程式碼，再加上我們對資料解析後的處理，我們就可以在後台輕鬆的對整個功能進行實現。
2、留言功能
2.1 程式碼展示
（1）前端部分
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#note{width: 400px;height:100px;}</style></head><body><div id="div1"></div><textarea name="note" id="note"></textarea><br /><input type="button" id="submit" value="留言" /><h1>留言内容</h1><hr><div id="liuyanban"></div></body><script src="../libs/jquery-3.1.1.js?1.1.11"></script><script>$(function(){
getData(); var userName = '<?php echo isset($_GET["name"])?$_GET["name"]:"null"; ?>';if(userName=="null"){
location = "login.php";
}
$("#div1").html("欢迎您，<span style='color:red;'>"+userName+"</span>");
$("#submit").on("click",function(){var noteVal = $("#note").val();if(noteVal==""){
alert("留言内容不能为空，请核对！");return;
}var time = getTime();var note = {"userName":userName,"time":time,"noteVal":noteVal
}
$.post("doAdd.php",note,function(data){if(data=="true"){
alert("留言内容提交成功！");
location.reload(true);
}else{
alert("留言失败！原因不明！");
}
});
});
}); function getData(){
$.post("doShowNote.php",function(data){var arr = data.split("[;]");
arr.pop();
console.log(arr);for (var i=0;i< arr.length;i++) {var thisNote = $.parseJSON(arr[i]);var div = "<br/><div id='div"+i+"'>用户名："+thisNote.userName+" 发布时间："+thisNote.time+"<br/><br/> 留言内容："+thisNote.noteVal+"</div><br/><hr>"$("#liuyanban").prepend(div);
}
})
} function getTime(){var today = new Date();var year = today.getFullYear();var month = today.getMonth();var date1 = today.getDate();var hours = today.getHours();var minutes = today.getMinutes()<10?"0"+today.getMinutes():today.getMinutes();var seconds = today.getSeconds()<10?"0"+today.getSeconds():today.getSeconds();var dateTime = year+"年"+(month+1)+"月"+date1+"日"+hours+":"+minutes+":"+seconds; return dateTime;
}</script></html>（2）後台部分
// 笔记的添加<?phpheader("Content-Type:text/html;charset=utf-8"); $userName = $_POST["userName"];$time = $_POST["time"];$noteVal = $_POST["noteVal"]; $arr = ["userName"=>$userName,"time"=>$time,"noteVal"=>$noteVal]; $str = json_encode($arr); $num = file_put_contents("note.txt", $str."[;]",FILE_APPEND); if($num>0){echo "true";
}else{echo "false";
}// 笔记的展示<?phpheader("Content-Type:text/html;charset=utf-8");echo file_get_contents("note.txt");（3）留言資料儲存檔案
// 这也是一个用于存储留言内容等各种信息的TXT文件{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:12","noteVal":"123123"}[;]{"userName":"123","time":"2017\u5e746\u670818\u65e514:01:28","noteVal":"\u54c8\u54c8\u54c8\uff0c\u6211\u662f\u5c0fK\uff0c\u6211\u4e3a\u81ea\u5df1\u4ee3\u8a00\u3002"}[;]2.2 功能詳述
2.1.1 前端部分
前端部分的作用無異於登入註冊功能，只不過根據要求多了對當前日期、使用者名稱資料、留言版樣式的取得。
2.1.2 後台部分
後台部分其實和登陸註冊的後台實作是一個套路，不過比兩個要多了一步。 json_encode($arr); 這是PHP提供給我們的將陣列轉換成JSON物件格式的方法，這就方便了我們在前端留言數據的回饋獲取。
以上就是本K首次在這個星期帶給大家的小功能demo，希望能夠幫到大家，如有錯誤，敬請指正，謝謝您的支持！
以上是前端後台的互動的一個實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Discuz後台登入問題解決方法大揭秘
Mar 03, 2024 am 08:57 AM
Discuz後台登入問題解決方法大揭秘，需要具體程式碼範例隨著網路的快速發展，網站建置變得越來越普遍，而Discuz作為一款常用的論壇建站系統，受到了許多站長的青睞。然而，正是因為其功能強大，有時候我們在使用Discuz的過程中會遇到一些問題，例如後台登入問題。今天，我們就來大揭秘Discuz後台登入問題的解決方法，並且提供具體的程式碼範例，希望能幫助到有需要
demo是什麼意思
Feb 12, 2024 pm 09:12 PM
demo這個字對喜歡唱歌的朋友已經不在陌生了，但有很多沒有接觸到的使用者好奇了demo是什麼意思呢？現在就來看看小編帶來的demo的含義介紹吧。 demo是什麼意思答案：錄音樣帶。 1.demo讀音英['deməʊ]、美['demoʊ]2、demo是"demonstration"的縮寫，一般指歌曲正式錄製前試聽的初步效果;3、demo用作名詞是錄音樣帶和試樣唱片的意思，用動詞是試用(尤指軟體)、示範和示範;
WordPress後台亂碼煩惱？試試這些解決方案
Mar 05, 2024 pm 09:27 PM
WordPress後台亂碼煩惱？試試這些解決方案，需要具體程式碼範例隨著WordPress在網站建置中的廣泛應用，許多用戶可能會遇到WordPress後台亂碼的問題。這種問題會導致後台管理介面顯示亂碼，對使用者的使用帶來極大困擾。本文將介紹一些常見的解決方案，幫助使用者解決WordPress後台亂碼的煩惱。修改wp-config.php檔案開啟wp-config.
PHP與Vue：完美搭檔的前端開發利器
Mar 16, 2024 pm 12:09 PM
PHP與Vue：完美搭檔的前端開發利器在當今網路快速發展的時代，前端開發變得愈發重要。隨著使用者對網站和應用的體驗要求越來越高，前端開發人員需要使用更有效率和靈活的工具來創建響應式和互動式的介面。 PHP和Vue.js作為前端開發領域的兩個重要技術，搭配起來可以稱得上是完美的利器。本文將探討PHP和Vue的結合，以及詳細的程式碼範例，幫助讀者更好地理解和應用這兩
前端面試官常問的問題
Mar 19, 2024 pm 02:24 PM
在前端開發面試中，常見問題涵蓋廣泛，包括HTML/CSS基礎、JavaScript基礎、框架和函式庫、專案經驗、演算法和資料結構、效能最佳化、跨域請求、前端工程化、設計模式以及新技術和趨勢。面試官的問題旨在評估候選人的技術技能、專案經驗以及對行業趨勢的理解。因此，應試者應充分準備這些方面，以展現自己的能力和專業知識。
如何使用 Go 語言進行前端開發？
Jun 10, 2023 pm 05:00 PM
隨著網路技術的發展，前端開發變得日益重要。尤其是行動端設備的普及，更需要高效率、穩定、安全又易於維護的前端開發技術。而作為一門快速發展的程式語言，Go語言已經被越來越多的開發者所使用。那麼，使用Go語言進行前端開發行得通嗎？接下來，本文將為你詳細說明如何使用Go語言進行前端開發。先來看看為什麼要使用Go語言進行前端開發。很多人認為Go語言是一門
C#開發經驗分享：前端與後端協同開發技巧
Nov 23, 2023 am 10:13 AM
身為C#開發者，我們的開發工作通常包括前端和後端的開發，而隨著技術的發展和專案的複雜性提高，前端與後端協同開發也變得越來越重要和複雜。本文將分享一些前端與後端協同開發的技巧，以幫助C#開發者更有效率地完成開發工作。確定好介面規範前後端的協同開發離不開API介面的交互。要確保前後端協同開發順利進行，最重要的是定義好介面規格。接口規範涉及到接口的命
Django是前端還是後端？一探究竟！
Jan 19, 2024 am 08:37 AM
Django是一個由Python編寫的web應用框架，它強調快速開發和乾淨方法。儘管Django是web框架，但要回答Django是前端還是後端這個問題，需要深入理解前後端的概念。前端是指使用者直接和互動的介面，後端是指伺服器端的程序，他們透過HTTP協定進行資料的互動。在前端和後端分離的情況下，前後端程式可以獨立開發，分別實現業務邏輯和互動效果，資料的交
