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实现点击弹出层实例代码
Jan 01 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
微信小程序排坑指南详解
May 23 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
深入了解js原型模式
May 30 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
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处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python中Threading用法详解
2017/12/27 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python中Selenium库使用教程详解
2020/07/23 Python
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
办公室文员工作职责
2014/01/31 职场文书
三年级数学教学反思
2014/01/31 职场文书
大家检讨书5000字
2014/02/03 职场文书
校园演讲稿汇总
2014/05/21 职场文书
房产公证委托书范本
2014/09/20 职场文书
检讨书范文
2015/01/27 职场文书