php和html数据交互,html如何与php数据交互

php文件与HTML页面的数据交互

HTML发送(使用POST发送)

无标题文档

• dog
• cat

searchArray = document.getElementsByTagName('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);

request.onreadystatechange = function() {

if (request.readyState===4) {

if (request.status===200) {

} else {

alert("发生错误：" + request.status);

}

}

}

注：关键操作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格式的数据对)

$(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);

},

});

});