web 前端和後臺配合工作流程

阿新 • • 發佈：2019-01-15

下面結合程式碼演示前端和後臺配合工作流程。

GET方式

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="process.php"></script>
    <script 
>
        function InputCheck(){
            var user = document.getElementById("user");
            if(user.value==""){
                alert("使用者名稱為空！");
                return false;
            }
            var pwd = document.getElementById("password");
            if(pwd.value==""){
                alert("密碼不能為空！" 
)
                return false;
            }
        }
    </script>
</head>

<body>
    <form name="myform" method="get" action="process.php">
        <label for="user">使用者名稱</label>
        <input type="text" id="user" name="user" value="user">
        <br 
 />
        <label for="password">密碼</label>
        <input type="password" id="password" name="password" value="password">
        <br />
        <input type="submit" id="submit" name="submit" value="提交" onclick="return InputCheck()">
    </form>
</body>
</html>

From的method定義了提交方式為get，在點選“提交”按鈕時就會把資料傳給後臺，點選的時候會呼叫javascript函式InputCheck()檢查輸入框是否為空，如果為空就跳出警告框，後續不再往服務端傳送訊息。
當兩個輸入框都有內容時，點選“提交”按鈕就會把資料傳到後臺，而具體執行哪個php是由Form中的action指定的，這裡指定的是process.php，process.php程式碼如下顯示。

<?php
/**
 * Created by PhpStorm.
 * User: sweird
 * Date: 2016/10/10
 * Time: 22:18
 */
header("Content-Type:text/html;charset=utf-8");//支援中文
$user=$_GET["user"];
$pwd=$_GET["password"];
echo "這是從web伺服器返回的訊息，已經經過php處理的！<br />";
echo "您提交的使用者名稱是：",$user,"<br />";
echo "您提交的密碼是：",$pwd;
?>

下面看下執行效果，本次使用phpstorm開發，程式碼寫完後點擊右上角的火狐瀏覽器圖示。
從phpstrom執行示例程式碼

此時跳到火狐瀏覽器中，按F12開啟除錯視窗並切換到網路介面。

然後清除掉使用者名稱輸入框中的內容，再點選“提交”，此時就觸發了javascript程式碼跳出一個警告視窗，並且發現在“網路”介面的除錯視窗並沒有資料，說明此時沒有向服務端傳送資料，而是在前端就進行了js檢驗。
前端javascript檢驗

然後在“使用者名稱”輸入框中輸入資料，點選提交。
這裡寫圖片描述
此時在位址列中發現已經執行了process.php，並且顯示出了使用者名稱和密碼，而在瀏覽器中顯示的資料正是後臺PHP程式碼打印出來的，至此前端和後臺的操作已演示完畢。
php後臺程式碼支行

POST方式

下面再來看下使用post方法時php是如何獲取前端傳送的資料的？
從上面使用get方法可以看到，如何要向服務端提交類似密碼這樣的敏感資訊時，那麼是非常不保密的，因為在URL中就顯示了密碼，那麼此時最好的辦法就是用post方式向後臺提交資料，post不會顯式的輸出密碼，但如果開啟除錯視窗照樣是可以看到密碼的。
但是使用POST時需要把相關的php程式碼放到wamp的www目錄，否則會出現如下錯誤提示：
這裡寫圖片描述
把php挪到如下目錄，再確保伺服器正常啟動：

然後在瀏覽器中手動輸入：http://localhost/post_demon.php

再點“提交”就出現如下成功的介面:

相關程式碼

post_demon.php程式碼如下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="process_post_data.php"></script>    <script>function InputCheck(){            var user = document.getElementById("user");            if(user.value==""){                alert("使用者名稱為空！");                return false;            }            var pwd = document.getElementById("password");            if(pwd.value==""){                alert("密碼不能為空！")                return false;            }        }    </script>
</head><body><form name="myform" method="post" action="process_post_data.php"><label for="user">使用者名稱</label><input type="text" id="user" name="user" value="user"><br /><label for="password">密碼</label><input type="password" id="password" name="password" value="password"><br /><input type="submit" id="submit" name="submit" value="提交" onclick="return InputCheck()"></form></body></html>

process_post_data.php程式碼如下:

<?php
/**
 * Created by PhpStorm.
 * User: sweird
 * Date: 2016/10/13
 * Time: 21:30
 */
header("Content-Type:text/html;charset=utf-8");
$name=$_POST["user"];
$pwd=$_POST["password"];
echo "這是從web伺服器返回的訊息，已經經過php處理的！<br />";
echo "您提交的使用者名稱是：",$name,"<br />";
echo "您提交的密碼是：",$pwd;
?>

web 前端和後臺配合工作流程

GET方式

POST方式

相關程式碼

web 前端和後臺配合工作流程

網頁設計、web前端、後臺的開發流程和註意事項 -----轉

講給Android程序員看的前端和後臺教...[Android]

軟體分類和軟體測試工作流程

北京房山web前端工程師，是工作難找還是你能力不夠

大學生專業web前端程式設計如何走向工作崗位！

匯出excel表格，前端和後臺匯出

前端和後臺處理轉義字元函式

java使用之json在前端和後臺之間的轉換

Web前端自學能找到工作嗎？Web就業方向有哪些？

淺談web前端與後臺資料互動

web前端與後臺資料互動

快速定位iOS線上App崩潰在哪個控制器裏面，需要和後臺配合使用

11 分散式搜尋引擎寫入和查詢的工作流程是什麼樣的？

struts2中關於前端和後臺的資料互動

近期商業專案心得（WEB前端及後臺）

講給Android程式設計師看的前端和後臺教程

c#學習之前端和後臺json處理

Java Web前端到後臺常用框架介紹

關於前端和後臺保留小數點後兩位的方法

web 前端和後臺配合工作流程

GET方式

POST方式

相關程式碼

相關推薦