分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 02:26责任编辑:顾先生关键词:HTML

注意:首先需要保证本地配置了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-8header("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格式的数据对)

<?phpheader(‘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);  

         },     

    });

});

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

原文地址:https://www.cnblogs.com/shiyiaccn/p/10132151.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved