【Js】JSON对象、JSON字符的使用总结

JSON对象 / JSON字符串区别

　　抛出一个最常见的疑问：什么是“JSON对象”，什么是“JSON字符串”，它俩的区别是什么？

　　废话不多说，直接上代码。　　

1.JSON对象：

 // javascript对象字面量写法
 var obj = {  “name” ： “Jay”，“age” ： “18” }；

 //JSON对象写法
 var json = {name  : "jay",  age : "18" };

　

　　在平时的应用中，这两种写法除去对象的属性名上有无“引号”外，没有任何区别，使用 console.log () 分别在控制台输出，结果如下：

 console.log(obj); // 输出对象字面量
 console.log(json); // 输出 json 对象
 ------------------------------------------
 //显示结果
 //对象字面量
 Object
     age: 18
     name: "Jay"
 __proto__ : Object

 //json 对象
 Object
     age: 18
     name: "jay"
  __proto__: Object

　　事实证明，这两种写法在JS中实质上是一样的，我们平时所说的“JSON对象”，通常就是上述两种方式来定义的。使用起来就像访问js对象的属性一样,通过"."来引用:

console.log(obj.name); //  Jay
console.log(json.age); // 18

　　

2.JSON字符串

var jsonStr = ‘{“name”：“jay” ， “age” ： “18”}’；

　　顾名思义，JSON字符串本质上是一个“字符串”。

　　程序员一提到字符串，首先想到的可能是用“引号”包裹的一串字符，例如“abc” ， ‘def’ 这样。所以我们可以很好的来区分JSON字符串和JSON对象，被引号包裹起来的字面量书写形式的JSON对象，就是JSON字符串。

JSON对象 / JSON字符串相互转化

1.JSON对象 -----------------------------》 JSON 字符串：

　　①JSON.stringify(obj) --- 常用 ---

// 使用方法
var obj = { name : "jay" , age : "18"};
var str = JSON.stringify(obj);

alert(str); //显示结果:  '{"name":"jay","age":"18"}'　　

　　

　　②JSON.toJSONstring()

　　找了半天，具体没找到怎么用，还要引入包，算了算了，弃了（无情）。

　　

2.JSON 字符串 -----------------------------》 JSON 对象：

　　①JSON.parse() --- 常用 ---

var str = '{ "name" : "jay" , "age" : "18"}';
var obj = JSON.parse(str);

console.log(obj); // 显示结果 : {name: "jay", age: "18"}

　　②eval('('+str+')')

var str = '{ "name" : "jay" , "age" : "18"}';
var obj = eval('('+str+')');

console.log(obj); // 显示结果 : {name: "jay", age: "18"}

　　

　　③$.parseJSON(str)

var str = '{ "name" : "jay" , "age" : "18"}';
var obj = $.parseJSON(str);

console.log(obj);

// 显示结果 : {name: "jay", age: "18"}

应用场景举例：提交数据到后端（php代码）

前段html：

<table>
    <tr class="student">
        <td>姓名:<input type="text" name="name"></td>
        <td>年龄:<input type="text" name="age"></td>
    </tr>
    <tr class="student>
        <td>姓名:<input type="text" name="name"></td>
        <td>年龄:<input type="text" name="age"></td>
    </tr>
</table>

　　

前端js：

//将多组学生信息,传递到后端
var students = [];

$(".student").each(function(index , element){
   var name= $(element).find("input[name=name]").val().trim();
   var age = $(element).find("input[name=age]").val().trim()  

    var tmp = {
        name : name,
        age : age
    } 

   student.push(tmp);
})

var form = new FormData(); 

form.append("students",JSON.stringify(students));

$.(ajax(){
   type : "post",
   data : form,
   url : postUrl,

   .......

})

php代码：

　

$students = $_REQUEST['students'];
// 第二个参数为true表示数组类型；省略第二个参数，表示为对象类型
$students = json_decode($student,true);

//输出学生信息
foreach($students as $item){
　　echo '学生:' . $item['name'] . '的年龄是' . $item['age'] ;
}