2024年最新json在前后端数据交互中的应用_前后端使用json交互的好处(1)，2024年最新膜拜

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

2.一个JSON数组——JSONArray

简单点的：
var json=[{"name":"张三" , "age":18 },{"name":"李四" , "age":20 }];

复杂一点的：
[
{"name":"张三", "age"=18,  "address":{"street":"湖南", "city":"长沙","country":"中国"}},

{"name":"李四", "age"=20,  "address":{"street":"湖南", "city":"张家界","country":"中国"}}
]

3.还有一种结构

var json={"abc":[{"name":"txt1"},{"name","txt2"}]};
//这里的json.abc是一个数组，数组是由2个子json组成的

遍历(后面不在讲这种结构）
for(var i=0;i<json1.abc.length;i++){alert(json1.abc[i].name);}

里面的是一个对象{}，如果是多个对象，则用逗号间隔，即{},{}，这样就组成了一个对象序列，为了辨别开始和结束，则需要加上[]才能进行传递，则实际传递的形式应该是[{},{}]，如果只要传递一个对象，则{}的形式就可以了。

四.json在前端(js)应用

后端将数据处理成json格式，前端就通过ajax来接收数据，并eval()或者json.prase(data)解析，循环遍历，展现在页面上。

$  .ajax({
                        url : "myfileAction",
                        dataType : "json",
                        type : "post",
                        success : function(data) {
                        }
                        });

第一步，接收数据
用ajax来接收后端发来的数据，简单说下ajax，ajax是一种用于快速创建动态网页的技术。通过在后台与服务器进行少量数据交换，ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。
type: “POST”, //请求的方式，也有get请求
url: “myfileAction”, //请求地址，后台提供的,填写具体action，也就是struts.xml文件中action名字。
data: {name:name},//data是传给后台的json字段，后台需要哪些就传入哪些，这里是接收数据，所以可以不用写。
dataType: “json”, //json格式，后台返回的数据为json格式的。

第二步，解析数据
前后台传输的时候其实是字符串，解析是把json字符串重新变成json类型的对象。

json字符串转换成json对象

var obj = eval('(' + data + ')');
或者 var obj = JSON.parse(data);  

区别：eval方法不会去检查给的字符串时候符合json的格式，同时如果给的字符串中存在js代码eval也会一并执行。相比而言eval()不安全，建议用JSON.parse。

json对象转为json字符串

var name = JSON.stringify(person);

前端传入后台的应该是一个json格式的字符串，而不是一个json对象，所以这个也有用的。
讲到这里简单提下发送数据吧。

<script type="text/javascript"> 
 $(document).ready(function(){ 
 var saveDataAry=[]; 
 var data1={"userName":"zhangsan","address":"bj"}; 
 var data2={"userName":"lisi","address":"nj"}; 
 saveDataAry.push(data1); 
 saveDataAry.push(data2); 
 $.ajax({ 
 type:"POST", 
 url:"user/saveUser", 
 dataType:"json", 
 contentType:"application/json", 
 data:JSON.stringify(saveData), 
 success:function(data){ 

 } 
 }); 
 }); 
</script>

ajax请求的时候也要指定dataType:“json”,contentType:”application/json” 这样就可以轻易的将一个对象或者List传到后端。

第三步，数据遍历
可以通过jQuery的$.each()方法遍历输出，举个例子

var arr = [{ name: "john", lang: "js" },{ name: "张三", lang: "ext" }];   
  $.each( arr, function(index, content) 
 {   
   alert( "the man's no. is: " + index + ",and " + content.name + " is learning " + content.lang );   
  });  

如果声明的是字符串，var arr=’[]’这样类型，那么遍历的时候应该先用json.parse()或者jquery的方法$.parseJSON将字符串转化为对象。

还有一种是for循环遍历

  for(var i=0; i<arr.length; i++)  
  {  
     alert(arr[i].name+" " + arr[i].value)  
  }  
  //取arr数组里一个叫name的值，比如上面name后面值是张三，就取出张三

五.json在后端上的应用

在后端action里要导入 net.sf.json.JSONObject这个包。

第一步，有几种后端数据封装成json数据格式

1.List集合转换成json代码
　List list = new ArrayList();
　list.add( “first” );
　list.add( “second” );
　JSONArray jsonArray = JSONArray.fromObject( list );
2. Map集合转换成json代码

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取