• JSON


    JSON  (JavaScript Object Notation,  JS 对象标记语言)  是一种语法

    任何语言都可以解析JSON,只要按照JSON的规则来就行

    和XML的比较

    JSON读写速度快

     json长度和XML格式比起来短小

      XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有提供的工具。无工具的情况下,相信熟练的开发人员一样能很快的写出想要的xml文档和JSON字符串,不     过,xml文档要多很多结构上的字符。
      JSON可以使用JavaScript内建的方法直接进行解析,转换成JavaScript对象,十分方便。
     

    JSON语法规则

    在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。
    JSON数据的书写格式是:名称/值对·
    名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:  比如     "name":"洪七"

    json的值可以是下面这些类型:

    数字(整敷或浮点敷)比如123,L23
    字符串(在双引号中)
    逻辑值(true或false)
    数组(在方括号中)
    对象(在花括号中)

    null

    示例

    <!--用大括号括起来,表示这是一个JSON对象-->
    {
    <!--值对名称:staff,值为数组,由3个对象组成,/*对象的属性为name,age*/-->
    "staff":[
    {"name":"洪七","age":70},
    {"name":"黄蓉","age":30},
    {"name":"郭靖","age":35}
      ]
    }

    JSON解析两种方式:eval和JSON.parse

      在代码中使用eva|是很危险的!特别是用它执行第三方的JSON数据(其中可能包含恶意代码)时,

     尽可能使用JSON.parse()方法解析字符串本身·该方法还可以捕捉JSON中的语法错误.

    json语法在线校验工具:https://jsonlint.com/

    将上一篇中代码相应部分小小的改一下

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Demo</title>
    <style>
    body, input, select, button, h1 {
        font-size: 28px;
        line-height:1.7;
    }
    </style>    
    </head>
    
    <body>
    
    <h1>员工查询</h1>
    
    <label>请输入员工编号:</label>
    <input type="text" id="keyword" />
    <button id="search">查询</button>
    <p id="searchResult"></p>
    
    <h1>员工新建</h1>
    <label>请输入员工姓名:</label>
    <input type="text" id="staffName" /><br>
    <label>请输入员工编号:</label>
    <input type="text" id="staffNumber" /><br>
    <label>请选择员工性别:</label>
    <select id="staffSex">
    <option></option>
    <option></option>
    </select><br>
    <label>请输入员工职位:</label>
    <input type="text" id="staffJob" /><br>
    <button id="save">保存</button>
    <p id="createResult"></p>
    
    <script>
    document.getElementById("search").onclick = function() { 
        var request = new XMLHttpRequest();
        request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
        request.send();
        request.onreadystatechange = function() {
            if (request.readyState===4) {
                if (request.status===200) { 
                    var data = JSON.parse(request.responseText);
                    if (data.success) { 
                        document.getElementById("searchResult").innerHTML = data.msg;
                    } else {
                        document.getElementById("searchResult").innerHTML = "出现错误:" + data.msg;
                    }
                } else {
                    alert("发生错误:" + request.status);
                }
            } 
        }
    }
    
    document.getElementById("save").onclick = function() { 
        var request = new XMLHttpRequest();
        request.open("POST", "server.php");
        var data = "name=" + document.getElementById("staffName").value 
                          + "&number=" + document.getElementById("staffNumber").value 
                          + "&sex=" + document.getElementById("staffSex").value 
                          + "&job=" + document.getElementById("staffJob").value;
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        request.send(data);
        request.onreadystatechange = function() {
            if (request.readyState===4) {
                if (request.status===200) { 
                    var data = JSON.parse(request.responseText);
                    if (data.success) { 
                        document.getElementById("createResult").innerHTML = data.msg;
                    } else {
                        document.getElementById("createResult").innerHTML = "出现错误:" + data.msg;
                    }
                } else {
                    alert("发生错误:" + request.status);
                }
            } 
        }
    }
    </script>
    </body>
    </html>
    <?php
    //设置页面内容是html编码格式是utf-8
    header("Content-Type: text/plain;charset=utf-8"); 
    //header("Content-Type: application/json;charset=utf-8"); 
    //header("Content-Type: text/xml;charset=utf-8"); 
    //header("Content-Type: text/html;charset=utf-8"); 
    //header("Content-Type: application/javascript;charset=utf-8"); 
    
    //定义一个多维数组,包含员工的信息,每条员工信息为一个数组
    $staff = array
        (
            array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"),
            array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"),
            array("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理")
        );
    
    //判断如果是get请求,则进行搜索;如果是POST请求,则进行新建
    //$_SERVER是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用global关键字
    //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法
    if ($_SERVER["REQUEST_METHOD"] == "GET") {
        search();
    } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
        create();
    }
    
    //通过员工编号搜索员工
    function search(){
        //检查是否有员工编号的参数
        //isset检测变量是否设置;empty判断值为否为空
        //超全局变量 $_GET 和 $_POST 用于收集表单数据
        if (!isset($_GET["number"]) || empty($_GET["number"])) {
            echo '{"success":false,"msg":"参数错误"}';
            return;
        }
        //函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。
        //global 关键词用于访问函数内的全局变量
        global $staff;
        //获取number参数
        $number = $_GET["number"];
        $result = '{"success":false,"msg":"没有找到员工。"}';
        
        //遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果
        foreach ($staff as $value) {
            if ($value["number"] == $number) {
                $result = '{"success":true,"msg":"找到员工:员工编号:' . $value["number"] . 
                                ',员工姓名:' . $value["name"] . 
                                ',员工性别:' . $value["sex"] . 
                                ',员工职位:' . $value["job"] . '"}';
                break;
            }
        }
        echo $result;
    }
    
    //创建员工
    function create(){
        //判断信息是否填写完全
        if (!isset($_POST["name"]) || empty($_POST["name"])
            || !isset($_POST["number"]) || empty($_POST["number"])
            || !isset($_POST["sex"]) || empty($_POST["sex"])
            || !isset($_POST["job"]) || empty($_POST["job"])) {
            echo '{"success":false,"msg":"参数错误,员工信息填写不全"}';
            return;
        }
        //TODO: 获取POST表单数据并保存到数据库
        
        //提示保存成功
        echo '{"success":true,"msg":"员工:' . $_POST["name"] . ' 信息保存成功!"}';
    }
    
    ?>
    
    
    
     
  • 相关阅读:
    asp.net Ajax调用Aspx后台方法
    JS 通过字符串取得对应对象
    nginx js、css、图片 及 一些静态文件中出现 http://upstreamname:port 导致部分网页样式显示不正常
    jexus手动跨域设置
    HTTP Error 400. The request hostname is invalid
    at MySql.Data.MySqlClient.MySqlStream.ReadPacket 或 FUNCTION account.AddMinutes does not exist
    sql xml 入门
    Jexus .Net at System.Net.Sockets.Socket.Connect (System.Net.IPAddress[] addresses, System.Int32 port)
    关于SQL SERVER中的FLOAT转换为VARCHAR
    JS倒计时
  • 原文地址:https://www.cnblogs.com/sunmarvell/p/7390943.html
Copyright © 2020-2023  润新知