html如何与php数据交互-PHP问题

资源魔 2020-07-18 18:15:56 14 0

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 php教程 html php故障解决 php使用问题