html与php交互实例,html如何与php数据交互
php⽂件与HTML页⾯的数据交互
HTML发送(使⽤POST发送)
⽆标题⽂档
searchArray = ElementsByTagName('li');//获取名字为’li’的所有标签项并存⼊数组
var writeArray = [];
for(var i = 0;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);
if (adyState===4) {
if (request.status===200) {
} else {
alert("发⽣错误：" request.status);
}
}
}
注：关键操作var request = new XMLHttpRequest();
phpjson格式化输出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 = '';
//使⽤超全局变量 $_GET 和 $_POST收集name对应的value，如下
$searchWrite = $_POST["data"]；
//将获取的HTML返回内容$searchWrite写⼊⽂档
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 = '';//假设⽂件内容为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格式的数据对)
$(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);
},
});
});
关键操作：$.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);
},
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。