码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-07-25 23:54:42      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:strong   input   结果   --   highlight   后端   json   echo   区别   

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‘] ;
}

 

  

 

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

标签:strong   input   结果   --   highlight   后端   json   echo   区别   

原文地址:https://www.cnblogs.com/jiangqilong/p/9365173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!