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 相关文章推荐
Javascript 不能释放内存.
Sep 07 Javascript
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 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
PHP脚本的10个技巧(3)
2006/10/09 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python实现猜单词小游戏
2020/05/22 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
构建高效的python requests长连接池详解
2020/05/02 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
上课迟到检讨书
2014/02/19 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2015年大学生实习评语
2015/03/25 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
Java实现简单小画板
2022/06/10 Java/Android