json格式及用法总结

一、json定义

json，全称JavaScript Object Notation，是一种轻量级数据交换格式，是JavaScript原生数据格式，所以在JavaScript中使用json完全不需要调用任何API。

二、json基础格式

这是一个简单的json格式，其中包含了3名学生的信息：

{"student":[
    {"name":"student1", "age":"18", "grade":"81"}, 
    {"name":"student2", "age":"19", "grade":"87"},
    {"name":"student3", "age":"20", "grade":"85"}
]}

其中，{ ……}包含的内容为一个对象，[……]包含的内容为一个数组。数据格式为 “名称：属性”，专业一些的用语就是 “键/值”。

三、常见用法

我们一般从数据库中读取数据，再传到前端页面上进行显示。读取的数据为json格式，我们需要把它转化为字符串，则要用到stringify()方法，反之，则用parse()方法，具体操作如下：

var dataobject= JSON.parse(datastr);
var datastr =JSON.stringify(dataobject);

其中，dataobject代表一个json对象，datastr代表一个字符串。值得注意的是，这两个方法对json对象进行的都是深拷贝，可以很好的避免对原数据的污染。
这里插入一个跟json关系不大但很有用的方法replace()。该方法是用来进行对字符串进行批量替换的，大致格式如下：

stringObject.replace(regexp/substr,replacement)
//第一个参数为需要被替换的字符子串
//第二个参数为需要替换进入字符串的字符子串

使用例子如下：

<script type="text/javascript">
var str="Visit www.baidu.com!"
document.write(str.replace(/baidu/, "google"))
</script>
//输出为：Visit www.google.com!
//在第一个字符串后加上g则代表全局替换

四、json的遍历

json对象的遍历可以通过类似于数组的形式访问。
json数组的遍历可以通过一个类对象数组的形式访问。
详细示例如下：

// 遍历JSON对象
var jsondata  = 
  [
    {"name":"student1", "age":"18", "grade":"81"}, 
    {"name":"student2", "age":"19", "grade":"87"},
    {"name":"student3", "age":"20", "grade":"85"}
];
for(var i in jsondata ){ 
  alert(i+":"+jsondata[i]);
}
for(var i in packJson){
  alert(i+":"+jsondata[i].name);
}

五、json对象作为参数进行传递

json对象作为参数进行传递其实就是指在后台获取json格式数据，如何把它传回前端，我这里使用nodejs作为后台进行交互，具体代码如下：
后台代码：

router.post('/njhzj', function (req, res) {
	
	let id = req.body.id;
	let farm_name = req.body.farm_name;
	let year_pro = req.body.year_pro;
	let crop = req.body.crop;
	let land_count = req.body.land_count;
	let seed_data = req.body.seed_data;
	let end_data = req.body.end_data;
	//获取前端传回来的数据
	var s=[id,farm_name,year_pro,crop,land_count,seed_data,end_data];
	connection.query("insert into year_plan value(?,?,?,?,?,?,?)",s,function(err,result){
	    	console.log(result);
			if(err){
                res.end();}
		else{
			res.writeHead(200, { "Content-Type": "application/json"});
			res.write(JSON.stringify(result));//传回结果（字符串）
			res.end();
		}
	    })
});

前端代码

<form action="/njhzj" id="form" name="form" method="post">
                    <div class="input">
                        <span >计划编号</span>
                        <input id="id" name="id" class="text" style="color:#00000 !important;" type="text"
                               placeholder="请输入计划编号">
                    </div>
                    <div class="input">
                        <span >农场名</span>
                        <input id="farm_name" name="farm_name" class="text" style="color:#00000 !important;" type="text"
                               placeholder="请输入农场名">
                    </div>
					<div class="input">
					    <span >年份</span>
					    <input id="year_pro" name="year_pro" class="text" style="color:#00000 !important;" type="text"
					           placeholder="请输入年份">
					</div>
					<div class="input">
					    <span >蔬菜品种</span>
					    <input id="crop" name="crop" class="text" style="color:#00000 !important;" type="text"
					           placeholder="请输入品种">
					</div>
					<div class="input">
					    <span >种植数量</span>
					    <input id="land_count" name="land_count" class="text" style="color:#00000 !important;" type="text"
					           placeholder="请输入种植数量">
					</div>
					<div class="input">
					    <span >播种日期</span>
					    <input id="seed_data" name="seed_data" class="text" style="color:#00000 !important;" type="text"
					           placeholder="请输入播种日期">
					</div>
					<div class="input">
					    <span >结束日期</span>
					    <input id="end_data" name="end_data" class="text" style="color:#00000 !important;" type="text"
					           placeholder="请输入结束日期">
					</div>
                    <div class="mb2">
                        <button class="btn btn-default " type="reset" id="submit" style="color: #00000">提交</button>
                    </div>
                </form>

<script>
   $(function () {
       $("#submit").on("click", function () {
           let id = $("#id").val();
           let farm_name = $("#farm_name").val();
		   let year_pro = $("#year_pro").val();
		   let crop = $("#crop").val();
		   let land_count = $("#land_count").val();
		   let seed_data = $("#seed_data").val();
		   let end_data = $("#end_data").val();
           if (id && farm_name && year_pro && crop && land_count && seed_data && end_data)
		   {
			  $("#form").ajaxSubmit(function (data) {
			      alert("提交成功！");
			      window.location.href='../admin.html';
			  });
           } else {
               alert("请输入完整表单！");
           }
       });
   })
//data即为传回的数据，由于这里进行的是插入操作。所以不需要对字符串进行解析，如需解析，则使用
var datas= JSON.parse(data);
for(var i in datas ){ 
 ......
}//进行json对象的遍历
</script>

六、json的优势

1.json速度更快，json语法易于使用，可以仅仅使用JavaScript的基础语法来为我们提供数据解析，由于其语法量非常小而且轻量级，他能够比其他格式更快地执行响应。
2.json的兼容性很高，它几乎支持所有新版的浏览器，也支持大部分操作系统，所以使用json编码生成的网页不需要有太多的修改就可以和大多数浏览器进行兼容，开发期间可以减少对于使用环境方面的考量。
3.json可以在服务器上解析，在服务器端解析是开发人员想要的重要部分，如果解析在服务器端快速，那么只有用户可以得到他们的响应的快速响应，所以在这种情况下json服务器端解析是强点表示我们在服务器端使用json。

七、json的缺陷

1.安全性问题，如果不受信任的服务或者不受信任的浏览器一起使用json会非常危险，在函数调用中json响应包含在传回的json中，将由浏览器进行执行，这样就导致了他可以很容易的被黑客入侵，使web托管程序受到各种攻击，所以在使用时需要设计如何保护它。
2.由于json的非冗长性，导致json丢失了XML文件具有的一些特性。Json中不存在命名空间，所以不能让上下文相同信息字段混合，而且，json采用冒号赋值，当xml转化为json时，标识符和属性文本之间就很难界定。
3.json没有错误处理，这一点我吃过很大的苦头，当时是使用百度开发的echats制图，返回数据格式为json，但在导入到图中时，json并不会主动报错，所以会导致我无法判断在哪一个部分出错，只能一点点校对。