SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的


Posted in Javascript onDecember 10, 2015

json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位。Json的语法非常简单,采用的是键值对表示形式。JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序,也可以从服务器端程序传递json格式的字符串给前端并由前端解释。这个字符串是符合json语法的,而json语法又是 javascript语法的子集,所以javascript很容易解释它,而且 JSON 可以表示比"名称 / 值对"更复杂的结构。下面我们通过实例来看看JQuery传递/解析json格式的数据是如何实现的。

1.首先来看前端jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" 
  pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="/springMVC6/js/jquery-1.7.2.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
  $(document).ready(function(){ 
    //传递字符串格式json对象到后台(一个json对象) 
    $("#resolveJsonObject").click(function(){ 
      var userName =encodeURI($("#userName").attr("value")); 
      var age = encodeURI($("#age").attr("value")); 
      var user = {userName:userName,age:age}; 
      var aMenu = encodeURI(JSON.stringify(user)); 
      $.ajax({ 
         url:"/springMVC6/user/data/resolveJsonObject" , 
         data:"orderJson=" + aMenu,  
         success:function(data){ 
        } 
      }); 
    }); 
    //传递json数组到后台 
    $("#resolveJsonArray").click(function(){ 
      var userName =encodeURI($("#userName").attr("value")); 
      var age = encodeURI($("#age").attr("value")); 
      //数组开始 
      var user1 = {userName:userName,age:age}; 
      var allMenu={ 
        "menu":[ ] 
        }; 
      allMenu.menu.push(user1); 
      var allMenu1 = encodeURI(JSON.stringify(allMenu)); 
      $.ajax({ 
        //json数组 
         url:"/springMVC6/user/data/resolveJsonArray" , 
        data:"orderJson=" + allMenu1, 
        success:function(data){ 
        } 
      }); 
    }); 
    //接收后台的json在前台解析 
    $("#resolveJson").click(function(){ 
      $.ajax({ 
        //解析从后台返回的json数据 
        url:"/springMVC6/user/data/resolveJson" , 
        type:"post",     
        success:function(data){ 
          var arr=eval(data); 
          alert(arr.length); 
          for(var m = 0;m<arr.length;m++){ 
            alert(arr[m].user.userName); 
          } 
        } 
      }); 
    }); 
  }); 
</script> 
</head> 
<body> 
  <h1>json添加用户</h1> 
  姓名:<input id="userName" type="text" name="userName"> 
  年龄:<input id="age" type="text" name="age"><br> 
  <input type="button" id="resolveJsonObject" value="json对象"> 
  <input type="button" id="resolveJsonArray" value="json数组"> 
  <input type="button" id="resolveJson" value="前端解析json字符串"> 
</body> 
</html>

2.使用javabean解析前端数据:

package com.tgb.web.controller.annotation; 
import java.io.IOException; 
import java.net.URLDecoder; 
import java.util.ArrayList; 
import java.util.List; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import net.sf.json.JSONArray; 
import net.sf.json.JSONObject; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import com.tgb.web.controller.entity.User; 
@Controller 
@RequestMapping("/user/data") 
public class DataController { 
  //接收前台传过来的字符串格式的json对象,在后台进行解析 
  @RequestMapping("/resolveJsonObject"  ) 
  public void resolveJsonObject(HttpServletRequest request,HttpServletResponse response) throws IOException { 
    //解码 
    String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8"); 
    JSONObject jb=new JSONObject(); 
    //将json格式的字符串转换为json对象,并取得该对象的“userName”属性值 
    String o=(String)jb.fromObject(str).get("userName"); 
    System.out.println(o); 
  } 
   //传递json数组字符串 
  @RequestMapping("/resolveJsonArray" ) 
  public void resolveJsonArray(HttpServletRequest request,HttpServletResponse response) throws IOException { 
    //解码,为了解决中文乱码 
    String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8"); 
    JSONObject jb=new JSONObject(); 
    //将json格式的字符串转换为json数组对象 
    JSONArray array=(JSONArray)jb.fromObject(str).get("menu"); 
    //取得json数组中的第一个对象 
    JSONObject o = (JSONObject) array.get(0);//获得第一个array结果 
    //取出json数组中第一个对象的“userName”属性值 
    String name=o.get("userName").toString();//获得属性值 
    System.out.println(name); 
  } 
  //通过该函数返回json格式的数据,在前台通过JQuery进行解析 
  @RequestMapping("/resolveJson" ) 
  public void resolveJson(HttpServletRequest request,HttpServletResponse response) throws IOException { 
    List m = (List) new ArrayList(); 
    JSONArray jsons = new JSONArray(); 
    for(int i=0;i<10;i++){ 
      User user = new User(); 
      user.setUserName("name_" + i); 
      m.add(user); 
    } 
    for(int j=0;j<m.size();j++){ 
      JSONObject jsonObject = new JSONObject(); 
      jsonObject.put("user", m.get(j)); 
      jsons.add(jsonObject); 
    } 
    response.getWriter().print(jsons.toString()) ; 
  } 
  @RequestMapping("/toJson"  ) 
  public String toJson() { 
    return "/json"; 
  } 
}

json的作用并不仅仅 在于作为字符串在前后台进行传递,我们采用json传递数据的时候更主要的考虑到的是它的传输效率。当两个系统需要进行数据交换的时候,如果传递的是经过 序列化的对象,效率是非常低的,如果传递的是存储大量对象的数组的时候效率就更不敢想象了,这时如果通过将对象或数据转换成json字符串进行传递,效率 就会提高很多。本文仅针对单系统中前后台数据传输与解析进行讲解,异构系统之间的json传输不在本文讨论范围内。

以上所述是SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的相关资料,希望大家喜欢。

Javascript 相关文章推荐
JQuery下关于$.Ready()的分析
Dec 13 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 #Javascript
javascript图片预加载完整实例
Dec 10 #Javascript
JavaScript动态插入CSS的方法
Dec 10 #Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 #Javascript
js表单提交和submit提交的区别实例分析
Dec 10 #Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 #Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 #Javascript
You might like
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
bootstrap table小案例
2016/10/21 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
python模块之paramiko实例代码
2018/01/31 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
使用python求解二次规划的问题
2020/02/29 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python中如何设置代码自动提示
2020/07/15 Python
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
赢在中国观后感
2015/06/02 职场文书
时尚女魔头观后感
2015/06/04 职场文书
家庭聚会祝酒词
2015/08/11 职场文书