JSON是存儲和交換文本信息的語法，類似與XML。它采用鍵值的方式來組織，易于人們閱讀和編寫，同時也易于解析和生成

json基本概念

• JSON:JavaScript對象表示法，(JavaScript Object Notation)

• JSON是存儲和交換文本信息的語法，類似與XML。它采用鍵值的方式來組織，易于人們閱讀和編寫，同時也易于解析和生成

• JSON是獨立于語言的，也就是說不管什么語言，都可以解析JSON，只需要按照JSON的規(guī)則來就行

json與XML比較

• json的長度和xml格式比起來很短小

• json讀寫的速度更快

• json可以使用javascript內(nèi)建方法直接進行解析，轉(zhuǎn)成javascript對象，非常方便。

JSON語法規(guī)則

• JSON 數(shù)據(jù)的書寫格式是：名稱/值對。
  名稱/值對組合中的名稱寫在前面(在雙引號中)，值對寫在后面(同樣在雙引號中)，中間用冒號隔開：比如"name":"郭靖"

• json的值可以是下面這些類型：
  數(shù)字(整數(shù)或浮點數(shù))，比如123，1.23
  字符串(在雙引號中)
  邏輯值(true或false)
  數(shù)組(在方括號中)
  對象(在花括號中)
  null

{
    "staff":[
        {"name":"洪七","age":"70"},
        {"name":"郭靖","age":"35"},
        {"name":"黃蓉","age":"30"},
    ]
}

這是一個典型的json。他首先用花括號括起來，表示這是一個json對象，對象里面有一個值對，這個值對名稱叫staff，他的值是一個數(shù)組，這個數(shù)組是由很多曉得json對象組成，對象里面又有兩個屬性。

json解析、格式化和校驗工具

json解析javascript

在js中解析json有兩種方式eval和JSON.parse

eval方法

var jsonobj = '{"staff":[{"name":"洪七","age":"70"},{"name":"郭靖","age":"35"},{"name":"黃蓉","age":"30"},]}'
var jsonop = eval('(' + jsonobj + ')');
alert(jsonop.staff[0].name);

Paste_Image.png

JSON.parse方法

var jsonobj = '{"staff":[{"name":"洪七","age":"70"},{"name":"郭靖","age":"35"},{"name":"黃蓉","age":"30"}]}'
var jsonop = JSON.parse(jsonobj);
alert(jsonop.staff[0].name);

Paste_Image.png

注意：用eval方法執(zhí)行他不會去看你的json字符串是否合法，而且json中一些js方法會直接的執(zhí)行，這是非常的危險。 所以盡量使用JSON.parse方法，來去解析json字符串，能返回一些語法錯誤，又安全又方便。

json在書寫的時候非常容易出錯，所以把json字符串進行校驗是必不可少的。

推薦json校驗在線工具jsonlint.com

AJAX使用json方式

<?php
//設置頁面內(nèi)容是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"); 

服務器端返回json對象

//通過員工編號搜索員工
function search(){
    //檢查是否有員工編號的參數(shù)
    //isset檢測變量是否設置；empty判斷值為否為空
    //超全局變量 $_GET 和 $_POST 用于收集表單數(shù)據(jù)
    if (!isset($_GET["number"]) || empty($_GET["number"])) {
        echo '{"success":false,"msg":"參數(shù)錯誤"}';
        return;
    }
    //函數(shù)之外聲明的變量擁有 Global 作用域，只能在函數(shù)以外進行訪問。
    //global 關(guān)鍵詞用于訪問函數(shù)內(nèi)的全局變量
    global $staff;
    //獲取number參數(shù)
    $number = $_GET["number"];
    $result = '{"success":false,"msg":"沒有找到員工。"}';
    
    //遍歷$staff多維數(shù)組，查找key值為number的員工是否存在，如果存在，則修改返回結(jié)果
    foreach ($staff as $value) {
        if ($value["number"] == $number) {
            $result = '{"success":true,"msg":"找到員工：員工編號：' . $value["number"] . 
                            '，員工姓名：' . $value["name"] . 
                            '，員工性別：' . $value["sex"] . 
                            '，員工職位：' . $value["job"] . '"}';
            break;
        }
    }
    echo $result;
}

返回json格式信息

查詢錯誤是返回{"success":false,"msg":"參數(shù)錯誤"}json格式對象

沒有找到員工時返回{"success":false,"msg":"沒有找到員工。"}json格式對象

//創(chuàng)建員工
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":"參數(shù)錯誤，員工信息填寫不全"}';
        return;
    }
    //TODO: 獲取POST表單數(shù)據(jù)并保存到數(shù)據(jù)庫
    
    //提示保存成功
    echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功！"}';
}

新建員工時錯誤時也返回json對象

客戶端修改

客戶端要把服務端傳來的json格式對象進行解析

查詢修改

document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "serverjson.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 = "出現(xiàn)錯誤：" + data.msg;
                }
            } else {
                alert("發(fā)生錯誤：" + request.status);
            }
        } 
    }
}

var data = JSON.parse(request.responseText);定義變量data使用JSON.parse解析獲取的json數(shù)據(jù)。再進行判斷顯示在頁面

document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "serverjson.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 = "出現(xiàn)錯誤：" + data.msg;
                }
            } else {
                alert("發(fā)生錯誤：" + request.status);
            }
        } 
    }
}

wei