云計算服務
服務器租用
DDOS 防護
虛擬主機
域名服務
基礎設施
關于我們
客戶端腳本訪問服務器端腳本通常涉及到使用JavaScript或其他客戶端腳本語言與服務器端的后端腳本進行交互，以下是一個簡單的示例，展示了如何使用JavaScript的fetch函數(shù)來訪問服務器端的PHP腳本。
1. 創(chuàng)建服務器端腳本（PHP）
我們需要創(chuàng)建一個服務器端的PHP腳本，它將處理來自客戶端的請求并返回響應，在這個例子中，我們將創(chuàng)建一個簡單的PHP腳本，它接收一個名為name的參數(shù)，并返回一個問候消息。
// server.php
<?php
if (isset($_GET['name'])) {
$name = $_GET['name'];
echo "Hello, " . htmlspecialchars($name) . "!";
} else {
echo "Please provide a name.";
}
?>
2. 創(chuàng)建客戶端HTML頁面
我們需要創(chuàng)建一個HTML頁面，其中包含一個表單和一個按鈕，用于提交用戶的名字到服務器端的PHP腳本，我們還需要在頁面中包含一些JavaScript代碼，以便在用戶提交表單時發(fā)送請求并處理響應。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>ClientServer Interaction</title>
</head>
<body>
<h1>Greeting Form</h1>
<form id="greetingform">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script>
document.getElementById('greetingform').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
fetch('server.php?name=' + encodeURIComponent(name))
.then(response => response.text())
.then(data => {
document.getElementById('response').innerText = data;
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
在這個HTML頁面中，我們使用了以下技術：
<form>元素用于收集用戶輸入的名字。
<button>元素的type="submit"屬性使得當用戶點擊按鈕時，表單會被提交。
JavaScript的addEventListener方法用于監(jiān)聽表單的submit事件，當表單被提交時，它會阻止默認的表單提交行為（即刷新頁面），然后使用fetch函數(shù)向服務器端的PHP腳本發(fā)送請求。
fetch函數(shù)接受一個URL參數(shù)，該參數(shù)指向服務器端的PHP腳本，并在查詢字符串中附加用戶提供的名字。
then方法用于處理fetch函數(shù)返回的Promise對象，第一個then將響應轉(zhuǎn)換為文本，第二個then將響應文本插入到頁面中的<div>元素中。
catch方法用于捕獲任何可能發(fā)生的錯誤，并將其記錄到控制臺。
.png)
.png)
