美文网首页php入门教程—打通前后端
php入门教程(五)前后端通讯基础

php入门教程(五)前后端通讯基础

作者: 党云龙 | 来源:发表于2019-10-14 14:54 被阅读0次

    有话说在前面


    php获取前端发送过来的数据,是通过http,你可以理解就是url。当我们访问一个url,比如dangyunlong.com的时候,那个域名后面的比如dangyunlong.com?article=1,问号后面的参数就是前端发送的数据。

    这种能看到的,明文显示再url中的方式就叫GET。还有一种不通过明文显示出来的方式,叫POST。
    这两种数据php都可以获取到。

    超全局变量


    php中的_GET和_POST就是专门用来获取前端数据的。
    这俩东西非常重要,以后我们会经常用到。

    前端页面


    你可以参考下面的例子:


    简单的表单提交示例

    这是前端的html,我写成了一个php文件,你写成html也是可以的。
    并且我做了一个基础的验证,其实再php端也可以验证,最佳的版本是前端和后端都验证,那样安全性会更高。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>表单基础</title>
            <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
        </head>
        <body>
            <form method="POST" action="6.php">
                <div>
                    <!--注意你的input必须有name值 这个值就是url中?后面的值-->
                    邮箱:<input type="text" id="email" name="email">
                </div>
                <div>
                    密码:<input type="password" id="password" name="password">
                </div>
                <div>
                    确认密码:<input type="password" id="passwordRepeat" name="passwordRepeat">
                </div>
                <div>
                    手机号:<input type="text" id="tel" name="tel">
                </div>
                <div>
                    <input type="checkbox" id="readerMe" name="readerMe"> 同意协议
                </div>
                <div>
                    <input type="submit" onclick="verify()">
                </div>
            </form>
            <script>
                function verify(){
                    //获取表单元素
                    var email = $("#email").val();
                    var password = $("#password").val();
                    var passwordRepeat = $("#passwordRepeat").val();
                    var tel = $("#tel").val();
                    var readerMe = $("#readerMe").prop("checked");
                    //非空验证
                    if(email == "" || email == null){
                        event.preventDefault();
                        alert("邮箱不能为空!");
                        return false;
                    }
                    if(password == "" || password == null){
                        event.preventDefault();
                        alert("密码不能为空!");
                        return false;
                    }
                    if(passwordRepeat == "" || passwordRepeat == null){
                        event.preventDefault();
                        alert("请再次输入密码!")
                        return false;
                    }
                    if(tel == "" || tel == null){
                        event.preventDefault();
                        alert("手机号不能为空!");
                        return false;
                    }
                    if(password !== passwordRepeat){
                        event.preventDefault();
                        alert("两次密码输入不一致!");
                        return false;
                    }
                    //验证邮箱格式
                    var apos = email.indexOf("@");
                    //一般邮箱格式是.com的,如果他不是“com”这三个字符,就弹出错误字符
                    var dotpos = email.lastIndexOf(".")
                    if(apos<1 || dotpos-apos<2){
                        event.preventDefault();
                        alert("邮箱格式不正确!");
                        return false;
                    }
                    //判断手机号是不是11位
                    if(tel.length!==11){
                        event.preventDefault();
                        alert("手机号必须是11位数字!");
                    }else{
                        if(isNaN(tel)){
                            event.preventDefault();
                            alert("手机号请输入数字!");
                            return false;
                        }
                    }
                    if(readerMe == false){
                        event.preventDefault();
                        alert("必须同意协议!");
                        return false;
                    }
                    alert("注册成功!")
                }
            </script>
        </body>
    </html>
    

    后端页面


    后端页面写法

    这里你会发现,$_POST和GET接收到的其实是一个数组。
    你可以单独输出,也可以直接通过print_r方法输出都可以。
    当我们能获取到前端发送来的数据的时候,我们将会进行更加复杂的操作!

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>接收到的信息</title>
        </head>
        <body>
            <?php
                $val1 = $_POST["email"];
                $val2 = $_POST["password"];
                $val3 = $_POST["tel"];
                
                echo "邮箱是:".$val1."<br/>"."密码是:".$val2."<br/>"."电话是:".$val3."<br/>";
                
                //$_GET和$_POST是用来接收http间发送的数据的
            
                //$_POST获取到的是一个数组
                $array = $_POST;
                print_r($array);
            ?>
        </body>
    </html>
    

    相关文章

      网友评论

        本文标题:php入门教程(五)前后端通讯基础

        本文链接:https://www.haomeiwen.com/subject/ylermctx.html