HTML5調(diào)用PHP
如今,網(wǎng)絡(luò)無處不在,我們需要在網(wǎng)上獲取或者傳遞很多數(shù)據(jù)。HTML5和PHP是建立Web應(yīng)用程序的重要組件。HTML5提供網(wǎng)頁界面,并在瀏覽器端使得數(shù)據(jù)可見,而PHP則用于在服務(wù)器端處理數(shù)據(jù)。這兩個偉大的技術(shù)可以相互協(xié)作來創(chuàng)建靈活,高效且安全的Web應(yīng)用程序。
傳統(tǒng)Web應(yīng)用程序的架構(gòu)是基于基于模板的Web頁面的,而這些頁面則與后端處理數(shù)據(jù)的代碼嚴(yán)格耦合起來。這也就意味著修改頁面布局或者添加一項新的功能需要直接修改代碼。這種耦合關(guān)系很難實現(xiàn)可維護性。
使用HTML5與PHP,我們可以創(chuàng)建出解耦的Web應(yīng)用程序。這也就意味著你可以在舊的布局中添加新的功能(或者在新的布局中實現(xiàn)舊的功能)。 讓我們看看如何調(diào)用PHP腳本,從而實現(xiàn)與服務(wù)器交互并處理數(shù)據(jù)的功能。
方法1: form表單提交
一個簡單的HTML表單可以通過POST或者GET的方式提交數(shù)據(jù)到服務(wù)端。下面是一個例子:
上述代碼中,form元素保存著參數(shù)action(指定了我們的PHP腳本),和submit按鈕(提交表單數(shù)據(jù)到PHP腳本)。當(dāng)表單提交之后,PHP腳本處理表單數(shù)據(jù)來完成特定的任務(wù)。<form action="handler.php" method="POST">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="Login" />
</form>
方法2: AJAX調(diào)用 在WebService中,通過AJAX技術(shù),我們可以異步處理服務(wù)器端的數(shù)據(jù)。異步JavScript和XML(AJAX)技術(shù)可以使得前端頁面無需刷新,就可以異步更新數(shù)據(jù)。 下面的示例說明了如何使用jQuery來為異步請求準(zhǔn)備合適的AJAX請求對象并向服務(wù)器發(fā)送請求。<?php
//處理用戶提交的數(shù)據(jù)
$username = htmlentities($_POST['username']);
$password = sha1(htmlentities($_POST['password']));
//處理請求
... ...
?>
在上述例子中,我們使用$.ajax來發(fā)送異步的POST請求。 type參數(shù)指定了請求類型,url參數(shù)則指定了PHP腳本的位置, data參數(shù)則指定了我們要發(fā)送的數(shù)據(jù), dataType參數(shù)指定了服務(wù)器返回的數(shù)據(jù)類型(JSON對象)。當(dāng)請求成功返回時,success回調(diào)函數(shù)被執(zhí)行。 過程總結(jié) HTML5和PHP為我們提供了各種功能去創(chuàng)建高效的Web應(yīng)用程序。并且,使用HTML5調(diào)用PHP腳本非常容易。你只需要使用一個form元素或者AJAX對象來調(diào)用服務(wù)器端的PHP腳本去處理數(shù)據(jù)即可。在下一篇文章中,我們將探討如何使用PHP和HTML5創(chuàng)建本地存儲功能的Web應(yīng)用程序。//準(zhǔn)備請求數(shù)據(jù)
var dataToSend = {
'id': 1234,
'message': 'Hello World!'
};
//準(zhǔn)備發(fā)送AJAX請求
$.ajax({
type: 'POST',
url: '../path/to/script.php',
data: dataToSend,
dataType: 'json',
success: function(data){
//處理完畢服務(wù)器的響應(yīng)數(shù)據(jù)
}
});