注意：首先需要保證本地配置了php開發環境，如WAMP開發環境
WAMP配置：https://www.cnblogs.com/shiyiaccn/p/9984579.html
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 = $_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格式
HTML接收（通過GET接收php 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);
},
});
});