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

更新时间:2023-04-03 13:22:33 阅读：评论：0

注意：首先需要保证本地配置了php开发环境，如wamp开发环境

wamp配置：

php获取html页面返回的数组并写入文档

html发送（使用post发送）

<!doctype html><html><head><meta ch写给外婆的一封信art="utf-8"><title>无标题文档</title></head><body>    <div class='arch-choo' id='arch_choo'>        <ul>             <li id='arch_1' class='arch-lected'><a href='#'>dog</a></li>            <li id='arch_2'><a href='#'>cat</a></li>        </ul>    </div>        <script type='text/javascript'>    　　archarray = document.getelementsbytagname('li');//获取名字为’li’的所有标签项并存入数组    　　var writearray = [];    　　for(var i = 0;i<archarray.length;i++){       　　 writearrxiyoujiay[i] = archarray[i].innertext;//获取标签内容writearray = ['dog','cat'];    　　}        　　//使用post将数组writearray发送到php文件rvertest.php    　　var request = new xmlhttprequest();    　　request.open("post", "rvertest.php");   　　 var q = "data=" + writearray;//  q="name"+ value；    　　//发送内容体由name+value组成，此处name为data，value为writearray    　　request.trequestheader("content-type","application/x-www-form-urlencoded");   　　 request.nd(q);   　　 request.onreadystatechange = function() {        　　if (request.readystate===4) {        　　if (request.status===200) {         　　} el {               　　 alert("发生错误：" + request.status);            　　}        　　}    　　 }    </script></body></html>

注：关键操作

var request = new xmlhttprequest();

request.open(“post”, “rvertest.php”);

var q = “data=” + writearray;// 生成信息体q = “name “+ value

request.trequestheader(“content-type”,”application/x-www-form-urlencoded”);

request.nd(q);

//html页面post发送内容后，php通过超全局变量 $_get 和 $_post收集

php接收（使用超全局变量$_get 和 $_post收集）

<?php//设置页面内容是html编码格式是utf-8header("content-type: text/plain;chart=utf-8"); //判断如果是get请求，则执行getmethod();；如果是post请求，则执行postmethod()。//$_rver是一个超全局变量，在一个脚本的全部作用域中都可用，不用使用global关键字if ($_rve如何用手机连接电脑上网r["request_method"] == "get") {    getmethod();} elif ($_rver["re深圳南山中英文学校quest_method"] == "post"){    postmethod();}function archshow(){    }function postmethod(){    $filename = 'save.txt';//使用超全局变量 $_get 和 $_post收集name对应的value，如下    $archwrite = $_post["data"]；//将获取的html返回内容$archwrite写入文档save.txt    file_put_contents($filename, $archwrite);    $content = file_get_contents($filename);    echo $content;}

注：关键操作

$archwrite = $_post[“data”]；

使用超全局变量 $_post收集name对应的value放入$archwrite，于是得到了html页面发送的数据，可以用了

html页面通过json获取php的变量

php发送（通过echo返回json格式的数据对）

<?phpheader('access-control-allow-origin:*');header('access-control-allow-methods:post,get');header('access-control-allow-credentials:true'); header("content-type: application/json;chart=utf-8"); if ($_rver["request_method"] == "get") {    getmethod()杨振宁和翁帆的孩子;} elif ($_rver["request_method"] == "post"){    postmethod();}function getmethod(){        $filename = 'arch_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);        $archread = $matches[0];//通过正则表达式提取存储列表到$archread数组['dog','cat','pig','人']        $defaultarch = $archread[0];        $result = '{"success":fal,"defaultarch":""}';        if($_get["data"]){            $result = '{"success":true,"defaultarch":"'.$defaultarch.'"}';        }    }    echo $result;//echo返回json格式化数据对{"success":true,"defaultarch":"'.$defaultarch.'"}

 } 
functionpostmethod(){
}

注：关键操作

$result = '{"success":true,"defaultarch":"'.$defaultarch.'"}';//将待返回内容改为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_arch.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.defaultarch);　　　　　　　　　　　　
　　　　　　　　　　　　}

},

                error: function(jqxhr){                        alert("发生错误：" + jqxhr.status);                  },                 });        });</script>

注：关键操作

$.ajax({

　　 type: “get”,

url: “default_arch.php?data=” + “archarray”,

datatype: “json”,

success: function(data) {

　　 if(data.success){alert(data.defaultarch);}

//data为php使用echo输出的json格式的数据对,通过data.name的形式即可以使用name对应的value

error: function(jqxhr){

　　alert(“发生错误：” + jqxhr.status);

});

本文发布于:2023-04-03 13:22:32，感谢您对本站的认可！