前端後台的互動的一個實例分享

零下一度
發布: 2023-03-10 18:54:02
原創
3444 人瀏覽過

這一週呢,本K在大神的指導下,完成了一個利用ajax與php檔案上傳處理結合的一個留言板功能的小實例,下面就讓本K來帶大家瞅瞅如何實現這一種功能。

一、介面概覽

#首先我們來看看這個小demo的具體效果。

這個demo中,主要包括了三個步驟,也分別對應了三個功能,分別是#註冊,登入與留言板功能。而這三個功能基本上都藉助了前後台互動的幾種技術,下面,本K就給大家分別展示一下這三個功能實現的程式碼。

二、功能實作

1、註冊功能與登入功能

1.1 程式碼展示

1.1.1 註冊功能

(1)前段部分

用户注册
用户注册
登入後複製

(2)後台部分

0){echo "true"; }else{echo "false"; }
登入後複製

(3)使用者資料儲存檔案

userName=123&pwd=123&rePwd=123[;]// 这其实是一个普通的txt文件,就是后台部分的user.txt
登入後複製

1.1.2 登入功能

(1)前端部分

用户登录
用户登录
登入後複製

#(2)後台部分


         
登入後複製

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)前端部分



留言内容


登入後複製

(2)後台部分

// 笔记的添加$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"; }
登入後複製
// 笔记的展示
         
登入後複製

(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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!