JsJSON对象JSON字符的使用总结

Posted 2020-12-25 jiangqilong

JSON对象 / JSON字符串区别

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

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

 

1.JSON对象：

 // javascript对象字面量写法
 var obj = {  “name” ： “Jay”，“age” ： “18” }；
 
 //JSON对象写法
 var json = {name  : "jay",  age : "18" };

　

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

 1 console.log(obj); // 输出对象字面量
 2 console.log(json); // 输出 json 对象
 3 ------------------------------------------
 4 //显示结果
 5 //对象字面量
 6 Object
 7     age: 18
 8     name: "Jay"
 9 __proto__ : Object
10 
11 //json 对象
12 Object
13     age: 18
14     name: "jay"
15  __proto__: Object
16 
17     

　　事实证明，这两种写法在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‘] ;
}