zoukankan      html  css  js  c++  java
  • 关于wamp的HTML, PHP, mysql 三者的操作与联系

      上一章简单说了一下wamp的按照和配置,相信大部分同学已经按照好了,今天正式讲一下HTML与PHP之间的传值。

      1、PHP向HTML传值

      2、HTML向PHP传值: 这里可以分为两部分讲解: 

        2.1、常见的表单form的提交; 

        2.2、通过ajax把数据传递给后台。

      

      1、PHP向HTML传值

      1.1、 首先,开启wamp,在上一章配置好的服务器根目录 E:/work/PHPtest/中新建test.php文件, 我们的文件就放在PHPtest中。

      1.2、我们先测试一下运行php的Apache环境是否配置成功,看看能否运行test.php文件。

      

    <?php
        echo "hello world";
    ?>

      保存代码,打开浏览器,输入上章配置好的配置服务器地址:  myserver.com/test.php

      

      如果浏览器显示上面的英文,说明运行php的Apache环境是可行的。

      注: 如果是汉字输出在最顶部加上一段代码: 

      
    header("content-type: text/html; charset=utf-8");

      1.3、在PHPtest中新建一个test.html,这个HTML是用来接收test.php中的数据。

      

    <!DOCTYPE html>
    <html lang='en'>
        <head>
            <meta charset='UTF-8'>
            <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
            <meta http-equiv='X-UA-Compatible' content='ie=edge'>
            <meta name='keywords' content=''>
            <meta name='description' content=''>
            <title>Document</title>
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        </head>
        <body>
            <script>
                $.get("./test.php", function(data){
                    console.log(data);
                })
            </script>
        </body>
    </html>

      这里我用了jquery插件,简洁便于直观,如果兴趣的同学,可以尝试用原生ajax编写。

      我们可以在 http://myserver.com/PHPtest/test.html 的控制台看见有 "hello world" 打印出来,这说明数据已经传输到test.html中。

      注: 获取数据一般使用 get 请求, 提交数据一般使用 post 请求

      1.4、 当然实际工作中后台不可能传输这么简单的一句话,往往是嵌套的数组或者对象之类的JSON数据,那么他们该怎么传递呢?

        1.4.1、其实这个传输方式都一样,作者都以最简单的 echo 方式传输, 只要将需要的数据进行压缩编码成字符串,前端来请求接收就可以。

        1.4.2、对于前端怎么处理这个json数据,很简单, 接下来分别讲述一下。

        1.4.3、 首先,编写test.php文件,我们重新写一遍。

    <?php
        //php中数组的创建
        $arr = array("name" => "jeck", "age" => "20", "gender" => "male");
    
        //echo后面可以用括号,可以不用
        //传递的数据必须是字符串,需要使用json_encode进行编码
        echo json_encode($arr);
    ?>

      我们再刷新一下,之前的页面可以看到,控制台中显示出了JOSN对象形式的字符串,如果在test.html中使用它,必须使用 JSON.parse()将字符串变成对象。

      再来,如果不是单一的组数,嵌套数组或者对象:

    <?php
        //php中数组的创建
        $arr = array("name" => "jeck", "age" => "20", "gender" => "male");
    
        //利用重复定义数组,组合新的数组。
        // $json = array("id" => 0, "item" => $arr);
        
        //数组的形式可以自由搭配
        // $json = array("id" => 0, "item" => array("jeck", "20", "male"));
    
        //直接在新的数组中,直接定义
        $json = array("id" => 0, "item" => array("name" => "jeck", "age" => "20", "gender" => "male"));
    
        //echo后面可以用括号,可以不用
        //传递的数据必须是字符串,需要使用json_encode进行编码
        echo json_encode($json);
    ?>

      刷新页面,在控制台中可以看到:

           

      这些是PHP中一些简单的组合,兴趣的同学可以尝试复杂的组合,在PHP中向数组中添加元素使用的函数是 :   array_push()  这个方法挺好用的。

      1.4.4、接下来讲一下在test.html 中如何使用这些数据:

    <!DOCTYPE html>
    <html lang='en'>
        <head>
            <meta charset='UTF-8'>
            <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'>
            <meta http-equiv='X-UA-Compatible' content='ie=edge'>
            <meta name='keywords' content=''>
            <meta name='description' content=''>
            <title>Document</title>
            <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        </head>
        <body>
            <p id="text"></p>
            <script>
                $.get("./test.php", function(data){
                    //首先,需要解码 JSON.parse(data)
                    var res = JSON.parse(data);
    
                    // 可以打印出来看一看
                    console.log(res);
    
                    //简单拼接,不用模板引擎,如果是一个重复类数据,需要循环,建议使用模板引擎
                    var txtStr = "My name is" + res.item.name + 
                                 ", I am " + res.item.gender +
                                 ", " + res.item.age + 
                                 " years old.";
    
                    //新建一个标签p,用来放置txtStr
                    $("#text").html(txtStr);
                })
            </script>
        </body>
    </html>

      刷新页面,可以看出页面会出现这行:

         

      PHP向HTML传值基本就这样,下一章讲解HTML向PHP传值

  • 相关阅读:
    抽签问题及优化
    P1020
    p1852ants
    1,三角形
    TG3
    如何看懂一篇题解
    Unsupported major.minor version 51.0 错误解决方案
    weblogic初学笔记2-在Linux上部署项目
    一块移动硬盘怎样兼容Mac和Windows系统,并且可以在time machine上使用
    org.hibernate.HibernateException: connnection proxy not usable after transaction completion
  • 原文地址:https://www.cnblogs.com/cp-cookie/p/7631116.html
Copyright © 2011-2022 走看看