joe

JSON介绍

JSON

JSON(JavaScript Object Notation) 即JavaScript对象表示法,是一种轻量级的数据交换格式,类似于XML。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。 
* 数据在键值对中 
* 数据由逗号分隔 
* 花括号保存对象 
* 方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是:名称/值对。 
名称/值对组合中的名称写在前面(在双引号中),值对写在后面(同样在双引号中),中间用冒号隔开: 
“firstName”:”John” 
这很容易理解,等价于这条 JavaScript 语句: 
firstName=”John”

JSON 值

JSON 值可以是: 
* 数字(整数或浮点数) 
* 字符串(在双引号中) 
* 逻辑值(true 或 false) 
* 数组(在方括号中) 
* 对象(在花括号中) 
* null

基础结构

JSON 结构有两种结构 
json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。 
1、对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,…}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。 
2、数组:数组在js中是中括号“[]”括起来的内容,数据结构为 [“Java”,”javascript”,”vb”,…],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。 
经过对象、数组2种结构就可以组合成复杂的数据结构了。

基础示例

1、名称/值对

{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}

2、数组

  {
   "people":[
       {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
       {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
       {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
   ]
   }

格式应用

  • 赋值给变量

例如,可以创建一个新的 JavaScript 变量,然后将 JSON 格式的数据字符串直接赋值给它:

 var people = {            
     "programmers": [
           { "firstName": "Brett","lastName": "McLaughlin","email": "aaaa"}, 
           { "firstName": "Jason","lastName": "Hunter","email": "bbbb"},
           { "firstName": "Elliotte","lastName": "Harold","email": "cccc"}],            
      "authors": [
           {"firstName": "Isaac", "lastName": "Asimov","genre": "sciencefiction"}, 
           { "firstName": "Tad","lastName": "Williams","genre": "fantasy"}, 
           {"firstName": "Frank","lastName": "Peretti","genre": "christianfiction"}],           
     "musicians": [
           {"firstName": "Eric","lastName": "Clapton","instrument": "guitar" }, 
           {"firstName": "Sergei","lastName": "Rachmaninoff","instrument": "piano"}]
       };

这非常简单;people包含前面看到的 JSON 格式的数据。但是,这还不够,因为访问数据的方式似乎还不明显。 
* 访问数据

尽管看起来不明显,但是上面的长字符串实际上只是一个数组;将这个数组放进 JavaScript变量之后,就可以很轻松地访问它。实际上,只需用点号表示法来表示数组元素。所以,要想访问 programmers 列表的第一个条目的姓氏,只需在 JavaScript 中使用下面这样的代码:

people.programmers[0].lastName;

注意,数组索引是从零开始的。所以,这行代码首先访问 people变量中的数据;然后移动到称为 programmers的条目,再移动到第一个记录([0]);最后,访问 lastName键的值。结果是字符串值 “McLaughlin”。 
下面是使用同一变量的几个示例。

 people.authors[1].genre  // Value is "fantasy"
 people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't one
 people.programmers[2].firstName // Value is "Elliotte"

利用这样的语法,可以处理任何 JSON 格式的数据,而不需要使用任何额外的 JavaScript 工具包或 API。

  • 修改数据

正如可以用点号和方括号访问数据,也可以按照同样的方式轻松地修改数据:

people.musicians[1].lastName="Rachmaninov";

在将字符串转换为 JavaScript 对象之后,就可以像这样修改变量中的数据。 
* 换回字符串

最终结论是,如果要处理大量 JavaScript 对象,那么 JSON 是一个好选择,这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

用jQuery实现Ajax

格式

jQuery.ajax([settings]) 
* type: 类型,”POST”、 “GET” 默认为GET 
* url: 发送请求的地址 
* data: 一个对象,连同请求发送到服务器的数据 
* dataType: 预期服务器返回的类型,不指定 则会根据HTTP包的MIME信息智能判断 通常采用json 
* success: 一个方法,成功请求后的回调函数 
* error:一个方法,请求失败时调用此函数 传入XMLHttpRequest对象

对于上例,用jQuery的方式,写法如下:

$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",    
            url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(),
            dataType: "json",
            jsonp: "callback",
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误:" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误:" + jqXHR.status);  
            },     
        });
    });

    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",   
            url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误:" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误:" + jqXHR.status);  
            },     
        });
    });
});


码字很辛苦,转载请注明来自朱一兵的博客《JSON介绍》

评论