찾다

집 >백엔드 개발 >PHP 문제 >HTML이 PHP 데이터와 상호 작용하는 방법

HTML이 PHP 데이터와 상호 작용하는 방법

尚
尚원래의
2019-10-29 15:43:054017검색

HTML이 PHP 데이터와 상호 작용하는 방법

php 파일과 HTML 페이지 간의 데이터 상호 작용

HTML 전송(POST를 사용하여 전송) 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <div class=&#39;search-choose&#39; id=&#39;search_choose&#39;>
        <ul> 
            <li id=&#39;search_1&#39; class=&#39;search-selected&#39;><a href=&#39;#&#39;>dog</a></li>
            <li id=&#39;search_2&#39;><a href=&#39;#&#39;>cat</a></li>
        </ul>
    </div>
    
    <script type=&#39;text/javascript&#39;>
    　　searchArray = document.getElementsByTagName(&#39;li&#39;);//获取名字为’li’的所有标签项并存入数组
    　　var writeArray = [];
    　　for(var i = 0;i<searchArray.length;i++){
       　　 writeArray[i] = searchArray[i].innerText;//获取标签内容writeArray = [&#39;dog&#39;,&#39;cat&#39;];
    　　}
    
    　　//使用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 = &#39;save.txt&#39;;
//使用超全局变量 $_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를 사용하여 이름에 해당하는 값을 수집하고 $searchWrite에 넣으므로 HTML 페이지에서 보낸 데이터를 가져오며 이를 사용할 수 있습니다

HTML json

을 통해 PHP 변수를 가져오는 페이지

php send(echo를 통해 json 형식의 데이터 쌍 반환) 

<?php
header(&#39;Access-Control-Allow-Origin:*&#39;);
header(&#39;Access-Control-Allow-Methods:POST,GET&#39;);
header(&#39;Access-Control-Allow-Credentials:true&#39;); 
header("Content-Type: application/json;charset=utf-8"); 
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    getMethod();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    postMethod();
}
function getMethod(){    
    $filename = &#39;search_save.txt&#39;;//假设文件内容为dog，cat，pig,人
    if (file_exists($filename)) {
        $content = file_get_contents($filename);
        $pattern = &#39;/[\x{4e00}-\x{9fa5}_a-zA-Z0-9]+/u&#39;;
        //[\x{4e00}-\x{9fa5}_a-zA-Z0-9]匹配中文、下划线、字母、数字
        preg_match_all($pattern, $content, $matches);
        $searchRead = $matches[0];//通过正则表达式提取存储列表到$searchRead数组[&#39;dog&#39;,&#39;cat&#39;,&#39;pig&#39;,&#39;人&#39;]
        $defaultSearch = $searchRead[0];
        $result = &#39;{"success":false,"defaultSearch":""}&#39;;
        if($_GET["data"]){
            $result = &#39;{"success":true,"defaultSearch":"&#39;.$defaultSearch.&#39;"}&#39;;
        }
    }
    echo $result;//echo返回json格式化数据对{"success":true,"defaultSearch":"&#39;.$defaultSearch.&#39;"}
 } 
functionpostMethod(){
}

참고: 키 조작 

$result = &#39;{"success":true,"defaultSearch":"&#39;.$defaultSearch.&#39;"}&#39;;//将待返回内容改为json格式
   echo $result;//HTML页面的json部分将从echo的输出获取json格式化数据对，因此echo输出内容需要为json格式

HTML 수신(php echo에서 반환된 json 형식 데이터 쌍을 GET을 통해 수신) 

<script type=&#39;text/javascript&#39;>
        $(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으로 문의하세요.
이전 기사：PHP의 일반적인 기능을 외울 필요가 있나요?다음 기사：PHP의 일반적인 기능을 외울 필요가 있나요?

관련 기사

더보기