html如何與php資料交互
php檔案與HTML頁面的資料互動
HTML傳送（使用POST傳送）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div class='search-choose' id='search_choose'>
<ul>
<li id='search_1' class='search-selected'><a href='#'>dog</a></li>
<li id='search_2'><a href='#'>cat</a></li>
</ul>
</div>
<script type='text/javascript'>
searchArray = document.getElementsByTagName('li');//获取名字为’li’的所有标签项并存入数组
var writeArray = [];
for(var i = 0;i<searchArray.length;i++){
writeArray[i] = searchArray[i].innerText;//获取标签内容writeArray = ['dog','cat'];
}
//使用POST将数组writeArray发送到php文件servertest.php
var request = new XMLHttpRequest();
request.open("POST", "servertest.php");
var q = "data=" + writeArray;// q="name"+ value；
//发送内容体由name+value组成，此处name为data，value为writeArray
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(q);
request.onreadystatechange = function() {
if (request.readyState===4) {
if (request.status===200) {
} else {
alert("发生错误：" + request.status);
}
}
}
</script>
</body>
</html>註：關鍵操作
var request = new XMLHttpRequest();
request.open("POST", "servertest.php");
var q = "data=" + writeArray;// 生成信息体q = “name “+ value
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send(q);
//HTML页面POST发送内容后，php通过超全局变量 $_GET 和 $_POST收集php接收（使用超全域變數$_GET 和 $_POST收集）
<?php
//设置页面内容是html编码格式是utf-8
header("Content-Type: text/plain;charset=utf-8");
//判断如果是get请求，则执行getMethod();；如果是POST请求，则执行postMethod()。
//$_SERVER是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字
if ($_SERVER["REQUEST_METHOD"] == "GET") {
getMethod();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
postMethod();
}
function searchShow(){
}
function postMethod(){
$filename = 'save.txt';
//使用超全局变量 $_GET 和 $_POST收集name对应的value，如下
$searchWrite = $_POST["data"]；
//将获取的HTML返回内容$searchWrite写入文档save.txt
file_put_contents($filename, $searchWrite);
$content = file_get_contents($filename);
echo $content;
}附註：關鍵操作
searchWrite=searchWrite=_POST["data"]；
使用超全域變數 $ _POST收集name對應的value放入$searchWrite，於是得到了HTML頁面發送的數據，可以用了
##HTML頁面透過json取得php的變數
#php發送（透過echo返回json格式的資料對）<?php
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials:true');
header("Content-Type: application/json;charset=utf-8");
if ($_SERVER["REQUEST_METHOD"] == "GET") {
getMethod();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
postMethod();
}
function getMethod(){
$filename = 'search_save.txt';//假设文件内容为dog，cat，pig,人
if (file_exists($filename)) {
$content = file_get_contents($filename);
$pattern = '/[\x{4e00}-\x{9fa5}_a-zA-Z0-9]+/u';
//[\x{4e00}-\x{9fa5}_a-zA-Z0-9]匹配中文、下划线、字母、数字
preg_match_all($pattern, $content, $matches);
$searchRead = $matches[0];//通过正则表达式提取存储列表到$searchRead数组['dog','cat','pig','人']
$defaultSearch = $searchRead[0];
$result = '{"success":false,"defaultSearch":""}';
if($_GET["data"]){
$result = '{"success":true,"defaultSearch":"'.$defaultSearch.'"}';
}
}
echo $result;//echo返回json格式化数据对{"success":true,"defaultSearch":"'.$defaultSearch.'"}
}
functionpostMethod(){
}$result = '{"success":true,"defaultSearch":"'.$defaultSearch.'"}';//将待返回内容改为json格式
echo $result;//HTML页面的json部分将从echo的输出获取json格式化数据对，因此echo输出内容需要为json格式<script type='text/javascript'>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "default_search.php?data=" + value,//value为HTML向url发送的内容体，在php中可以通过超全局变量收集
dataType: "json",
//data为php使用echo返回的json格式的数据对,通过data.name的形式即可以使用name对应的value
success: function(data) {
if (data.success) {
alert(data.defaultSearch);
}
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});
</script>$.ajax({
type: "GET",
url: "default_search.php?data=" + "searchArray",
dataType: "json",
success: function(data) {
If(data.success){alert(data.defaultSearch);}
//data为php使用echo输出的json格式的数据对,通过data.name的形式即可以使用name对应的value
},
error: function(jqXHR){
alert("发生错误：" + jqXHR.status);
},
});
});以上是html如何與php資料交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
繼續使用PHP：耐力的原因
Apr 19, 2025 am 12:23 AM
PHP仍然流行的原因是其易用性、靈活性和強大的生態系統。 1)易用性和簡單語法使其成為初學者的首選。 2)與web開發緊密結合，處理HTTP請求和數據庫交互出色。 3)龐大的生態系統提供了豐富的工具和庫。 4)活躍的社區和開源性質使其適應新需求和技術趨勢。
HTML與CSS和JavaScript：比較Web技術
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。
使用與HTML的React：渲染組件和數據
Apr 19, 2025 am 12:19 AM
在React中使用HTML渲染組件和數據可以通過以下步驟實現：使用JSX語法：React使用JSX語法將HTML結構嵌入JavaScript代碼中，編譯後操作DOM。組件與HTML結合：React組件通過props傳遞數據，動態生成HTML內容，如。數據流管理：React的數據流是單向的，從父組件傳遞到子組件，確保數據流動可控，如App組件傳遞name到Greeting。基本用法示例：使用map函數渲染列表，需添加key屬性，如渲染水果列表。高級用法示例：使用useState鉤子管理狀態，實現動
如果session_start（）被多次調用會發生什麼？
Apr 25, 2025 am 12:06 AM
多次調用session_start()會導致警告信息和可能的數據覆蓋。 1)PHP會發出警告，提示session已啟動。 2)可能導致session數據意外覆蓋。 3)使用session_status()檢查session狀態，避免重複調用。
IIS和PHP的兼容性：深度潛水
Apr 22, 2025 am 12:01 AM
IIS和PHP可以兼容，通過FastCGI實現。 1.IIS通過配置文件將.php文件請求轉發給FastCGI模塊。 2.FastCGI模塊啟動PHP進程處理請求，提高性能和穩定性。 3.實際應用中需注意配置細節、錯誤調試和性能優化。
session_start（）函數的意義是什麼？
May 03, 2025 am 12:18 AM
session_start（）iscucialinphpformanagingusersessions.1）ItInitiateSanewsessionifnoneexists，2）resumesanexistingsessions，and3）setsasesessionCookieforContinuityActinuityAccontinuityAcconActInityAcconActInityAcconAccRequests，EnablingApplicationsApplicationsLikeUseAppericationLikeUseAthenticationalticationaltication and PersersonalizedContentent。
作曲家：通過AI的幫助開發PHP
Apr 29, 2025 am 12:27 AM
AI可以幫助優化Composer的使用，具體方法包括：1.依賴管理優化：AI分析依賴關係，建議最佳版本組合，減少衝突。 2.自動化代碼生成：AI生成符合最佳實踐的composer.json文件。 3.代碼質量提升：AI檢測潛在問題，提供優化建議，提高代碼質量。這些方法通過機器學習和自然語言處理技術實現，幫助開發者提高效率和代碼質量。
使用Laravel：使用PHP簡化Web開發
Apr 19, 2025 am 12:18 AM
Laravel優化Web開發流程的方法包括：1.使用路由系統管理URL結構；2.利用Blade模板引擎簡化視圖開發；3.通過隊列處理耗時任務；4.使用EloquentORM簡化數據庫操作；5.遵循最佳實踐提高代碼質量和可維護性。
