Ajax全接触(三)JSON格式

JSON是存储和交换文本信息的语法,类似与XML。它采用键值的方式来组织,易于人们阅读和编写,同时也易于解析和生成

json基本概念

  • JSON:JavaScript对象表示法,(JavaScript Object Notation)

  • JSON是存储和交换文本信息的语法,类似与XML。它采用键值的方式来组织,易于人们阅读和编写,同时也易于解析和生成

  • JSON是独立于语言的,也就是说不管什么语言,都可以解析JSON,只需要按照JSON的规则来就行

json与XML比较

  • json的长度和xml格式比起来很短小

  • json读写的速度更快

  • json可以使用javascript内建方法直接进行解析,转成javascript对象,非常方便。

JSON语法规则

  • JSON 数据的书写格式是:名称/值对。
    名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开:比如"name":"郭靖"

  • json的值可以是下面这些类型:
    数字(整数或浮点数),比如123,1.23
    字符串(在双引号中)
    逻辑值(true或false)
    数组(在方括号中)
    对象(在花括号中)
    null

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

这是一个典型的json。他首先用花括号括起来,表示这是一个json对象,对象里面有一个值对,这个值对名称叫staff,他的值是一个数组,这个数组是由很多晓得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方法执行他不会去看你的json字符串是否合法,而且json中一些js方法会直接的执行,这是非常的危险。 所以尽量使用JSON.parse方法,来去解析json字符串,能返回一些语法错误,又安全又方便。

json在书写的时候非常容易出错,所以把json字符串进行校验是必不可少的。

推荐json校验在线工具jsonlint.com

AJAX使用json方式

<?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"); 

服务器端返回json对象

//通过员工编号搜索员工
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;
}

返回json格式信息

查询错误是返回{"success":false,"msg":"参数错误"}json格式对象

没有找到员工时返回{"success":false,"msg":"没有找到员工。"}json格式对象

//创建员工
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"] . ' 信息保存成功!"}';
}

新建员工时错误时也返回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 = "出现错误:" + data.msg;
                }
            } else {
                alert("发生错误:" + request.status);
            }
        } 
    }
}

var data = JSON.parse(request.responseText);定义变量data使用JSON.parse解析获取的json数据。再进行判断显示在页面

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 = "出现错误:" + data.msg;
                }
            } else {
                alert("发生错误:" + request.status);
            }
        } 
    }
}

wei

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,922评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,591评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,546评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,467评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,553评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,580评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,588评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,334评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,780评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,092评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,270评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,925评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,573评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,194评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,437评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,154评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,231评论 0 4
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,647评论 18 139
  • 自己用生菜,牛肉丸,龙须面,乱炖一碗,味道还出乎意料的美味!有时不按食谱,按心情随意过生活,也会有惊喜!
    只喝拿铁阅读 126评论 0 0
  • 夜深人静,回到了自己的世界中,一切感觉好安静,那些世界上的纷纷扰扰都离开自己。欲望、权利、财富一切一切不要想那么多...
    吴凤蝶阅读 143评论 0 0
  • 相信看过《人民的名义》这部电视剧的,对一开头那个小官巨贪赵德汉肯定印象深刻。他看起来是那么朴素,那么节俭,那么...
    月满人间阅读 284评论 0 2