隨著互聯網的發展,前端作為網頁的展示端,越來越受到重視。而JS作為前端領域的核心技術,在業務開發中頻繁的使用。我們常常需要JS和后端語言(PHP)進行交互,在此我將分享JS中如何使用PHP。
首先介紹一些基本概念。一般而言,JS和PHP之間主要是通過Ajax實現交互。Ajax允許我們在不重新加載整個頁面的情況下更新網頁的一部分,可以大大提高我們的頁面展示效果,給用戶流暢的體驗。在JS中,我們可以使用HTTP請求與服務器端PHP進行數據的傳遞。通常情況下,我們使用GET和POST兩種請求方式。GET方式的傳參方式是通過URL傳遞。而POST方式則是在請求體中傳遞參數。具體如下:
// GET方式 var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.example.com/Test.php?para=123', true); xhr.send(null); // POST方式 var xhr = new XMLHttpRequest(); xhr.open('POST', '/Test.php', true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send("name=John&age=30");
這里注意一下,POST請求的參數需要設置request header的Content-type類型為application/x-www-form-urlencoded。如上述例子中,則需要用xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");進行設置。
接下來我們來具體實現一個漲潮汐信息的例子,首先我們需要建立一個數據庫表,例如下方表結構:
-- 海區信息 CREATE TABLE `ocean_info` ( `id` int(11) NOT NULL AUTO_INCREMENT, `ocean_name` varchar(20) DEFAULT '', `high_tide_time` datetime, `high_tide_level` float(3,1), PRIMARY KEY (`id`) ) ENGINE=InnoDB;
表中ocean_name是海洋名字,high_tide_time是高潮時間,high_tide_level是高潮水位。然后我們建立一個PHP文件,編寫查詢邏輯:
connect_errno) { echo "Failed to connect to MySQL: " . $mysqli->connect_error; } $sql = "SELECT * FROM ocean_info"; $res = $mysqli->query($sql); $row = array(); while ($row[] = $res->fetch_assoc()); // 將結果JSON化 echo json_encode($row); ?>
我們用PHP建立了一個連接數據庫的實例,然后查詢ocean_info表的所有數據,并將查詢結果序列化為JSON字符串,最后輸出到網頁中。接下來是JS的部分,利用Ajax請求PHP文件中的數據:
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var results = JSON.parse(this.responseText); console.log(results); } }; xhttp.open("GET", "/ocean.php", true); xhttp.send();
這里我們使用原生JS發送一個GET請求,將結果從字符串JSON化為一個數組。然后我們可以在控制臺輸出結果驗證是否成功。
以上就是一個簡單的使用JS和PHP進行交互的例子。在實際應用中,我們可以將前端與后端完全分離,達到真正的前后端分離。而使用JS與PHP進行交互,可以幫助我們在前端業務邏輯比較復雜的情況下更好地完成業務需求,實現更好的用戶體驗。