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

番茄西红柿发布于2019-04-23 11:58 / 1577人阅读

摘要：宋体注意首先需要保证本地配置了宋体开发环境，如宋体开发环境宋体配置黑体获取黑体页面返回的数组并写入文档宋体发送宋体使用宋体发送无标题文档获取名字为的所有标签项并存入数组

注意：首先需要保证本地配置了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=#>doga>li>
            <li id=search_2><a href=#>cata>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格式的数据对）

注：关键操作

$.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);

});

GPU云服务器云服务器 php与web页面交互 php与前端的交互 php与表单交互 php如何与前端交互

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1436.html

浏览器同源策略，及跨域解决方案

摘要：三哪些会受到同源策略限制对于浏览器来说，除了会受到同源策略的限制外，浏览器加载的一些第三方插件也有各自的同源策略。九的现代浏览器允许脚本直连一个地址而不管同源策略。一、Origin（源）源由下面三个部分组成：域名端口协议两个 URL ，只有这三个都相同的情况下，才可以称为同源。下来就以 http://www.example.com/page.html 这个链接来比较说...

scq000 2019-08-23 12:08 评论0 收藏0
Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

wh469012917 2019-06-27 16:37 评论0 收藏0
Vue-book 2.0 一个移动端简单的全栈 web APP

摘要：本项目是一个简单的全栈项目，前端新手可以拿来练练手。项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书，并且前台注册登录后可以将书的订单发给服务器，并存到服务器。 Vue-book 2.0 Github 地址：https://github.com/percy507/v... 【觉得不错就来个 star 吧 ^_^】说明（菜鸟请进，大神绕道 ~）前端...

NotFound 2019-08-20 16:53 评论0 收藏0
Vue-book----一个简单的全栈项目

摘要：地址觉得不错就给个吧说明前端后端本项目实现了一些简单的功能，后台可以对图书进行录入录出扫码或手动，前台显示录入的图书。 Vue-book A simple full stack project about book~ GitHub 地址（觉得不错就给个 star 吧 ^_^）说明前端: Vue.js + Vuex + Webpack2 后端: php + MySQL 本项目实现...

宠来也 2019-08-20 16:22 评论0 收藏0