写在前面

PHP

在之前的学习过程中我们接触过前后台数据请求交互的方法有表单提交、AJAX请求以及Angularjs中的$http,今天我们尝试在PHP中使用 $_GET 与$_POST 实现简单的前后台数据传输交互功能;

 
PHP中给我们提供了一群功能十分强大的超全局 数组,它们 可以在任何位置,任何作用域之内使用,而且无需声明,拿到即可使用!
又称 : 超全局数组、超全局变量、预定义数组、预定义变量
这篇文章里我们单独讲一下PHP 中的$_GET 变量$_POST变量
① 在 PHP 中,预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值。即用来获取前台通过get请求发送的数据。
② 预定义的 $_POST 变量用于收集来自 method="post" 的表单中的值。即用来获取前台通过post发送的数据。

顺便我们回顾下表单的一些基础知识:
1、 form表单的两个重要属性
action:表示表单提交的服务器地址
method:表单提交数据的方式,可选值有get、post两种。
2、get、post的区别
get通过URL传递数据,所有内容在URL(地址栏)可以看到不安全,而post无法看见,比较安全。
get传递的数据量是有限的且只能传递文本信息,而post可以传递大量数据并且可以传递图片、视频等其他文件类型。
get传输速度比post快(这是get的唯一一个优点)
3、get使用URL传递数据的格式
http://URL地址.html?name1=value1&name2=value2从: “?”表示参数传递的开始,多个参数之间用&符号间隔,同一个参数
用name来标识value。
http://127.0.0.1:8020/025454.html?username=123&password=123
所以使用表单时,input输入框的name属性一定不能省略, 如果省略input的name属性,则这个input的数据不会往后台传递;
接下来我们使用PHP 中的$_GET 变量和$_POST变量实现简单的前后台数据传输交互功能:
 form.html 文件代码如下
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP $_GET 变量和$_POST变量使用示例</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <form action="03-ChaoQuanJuArray.php" method="post">
            用户名:<input type="text" name="username" />        
            密码:<input type="password" name="pwd" />
            <button id="btn1">点击发送post请求</button>  
        </form>
        <form action="03-ChaoQuanJuArray.php" method="get">
            用户名:<input type="text" name="username" />        
            密码:<input type="password" name="pwd" />
            <button id="btn2">点击发送get请求</button>      
        </form>
       
    </body>
</html>

接下来我们新建一个PHP文件用来请求访问和判断,代码如下:

if(isset($_GET["username"])&& isset($_GET["pwd"])){
    
     if($_GET["username"]=='wq'&& $_GET["pwd"]=="123"){
            echo "登陆成功!";
        }else{
            echo "登陆失败!";
        }
}

if(isset($_POST["username"])&& isset($_POST["pwd"])){
    
     if($_POST["username"]=='wq'&& $_POST["pwd"]=="123"){
            echo "登陆成功!";
        }else{
            echo "登陆失败!";
        }
}

则相应的函数触发的JS代码如下所示:

<script type="text/javascript">
            $("#btn1").click(function(){
                var username = $("input[name='username']").val();
                var pwd = $("input[name='pwd']").val();
                $.post("03-chaoQuanJuArray.php",{
                    "username":username,
                    "pwd":pwd,
                },function(data){
                    alert(data);
                })
            });
            $("#btn2").click(function(){
                var username = $("input[name='username']").val();
                var pwd = $("input[name='pwd']").val();
                $.get("03-chaoQuanJuArray.php",{
                    "username":username,
                    "pwd":pwd,
                },function(data){
                    alert(data);
                })
            });
        </script>
        

!注意:在运行时确保已经搭建好了运行环境,保证服务器在线且处于运行状态

在运行HTML文件时,记得将服务器地址端口号改为localhost以访问本机文件:

则当我们输入密码,点击第一个按钮:点击发送POST请求时,表单演示如下:

则当我们输入密码,点击第二个按钮:点击发送GET请求时,表单演示如下:

在 HTML 表单中使用 method="get" 时,所有的变量名和值都会显示在 URL 中。

注释:所以在发送密码或其他敏感信息时,不应该使用这个方法!

然而,正因为变量显示在 URL 中,因此可以在收藏夹中收藏该页面。在某些情况下,这是很有用的。

注释:HTTP GET 方法不适合大型的变量值。它的值是不能超过 2000 个字符的。
 
posted on 2017-10-19 23:27  卡尔西法calcifer  阅读(5473)  评论(2编辑  收藏  举报