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

2018-12-17 10:47:53来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

注意:首先需要保证本地配置了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-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 = $_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);}

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

         },

         error: function(jqXHR){     

           alert("发生错误:" + jqXHR.status);  

         },     

    });

});

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:深入解析ES6之数据解构的用法

下一篇:CSS布局模型