• 技术文章 >后端开发 >PHP问题

    html如何与php数据交互

    尚2019-10-29 15:43:05原创2055

    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=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);}
    //data为php使用echo输出的json格式的数据对,通过data.name的形式即可以使用name对应的value
             },
             error: function(jqXHR){     
               alert("发生错误:" + jqXHR.status);  
             },     
        });
    });

    以上就是html如何与php数据交互的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html php
    上一篇:php常用函数有必要背吗 下一篇:php查询用户是否存在
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• php判断是否为空字符串• php批量随机生成数字不重复• php同时上传表单和图片时enctype怎么填• php如何把数据存到数据库中
    1/1

    PHP中文网