html如何与php数据交互

来源：动视网责编：小采时间：2020-11-27 14:18:32

html如何与php数据交互

html如何与php数据交互:php文件与HTML页面的数据交互HTML发送（使用POST发送）<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <

推荐度：

点击下载本文 文档为doc格式

导读html如何与php数据交互:php文件与HTML页面的数据交互HTML发送（使用POST发送）<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <

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格式

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); }, }); });

html如何与php数据交互

html如何与php数据交互:php文件与HTML页面的数据交互HTML发送（使用POST发送）<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <

推荐度：

点击下载本文 文档为doc格式

标签：数据 php html

热门焦点

html如何与php数据交互

html如何与php数据交互

html如何与php数据交互

最新推荐

猜你喜欢

热门推荐