springMVC框架下JQuery传递并解析Json数据

www.111cn.net 更新:2017-01-11 编辑:kepeer 来源:转载
这篇文章介绍了springMVC框架下JQuery传递并解析Json数据的教程,有兴趣的同学可以参考一下这篇文章

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(){

      varuserName =encodeURI($("#userName").attr("value"));

      varage = encodeURI($("#age").attr("value"));

        

      varuser = {userName:userName,age:age};

      varaMenu = encodeURI(JSON.stringify(user));

  

      $.ajax({

         url:"/springMVC6/user/data/resolveJsonObject",

         data:"orderJson="+ aMenu, 

         success:function(data){

            

        }

      });

    });

      

    //传递json数组到后台

    $("#resolveJsonArray").click(function(){

      varuserName =encodeURI($("#userName").attr("value"));

      varage = encodeURI($("#age").attr("value"));

        

      //数组开始

      varuser1 = {userName:userName,age:age};

      varallMenu={

        "menu":[ ]

        };

      allMenu.menu.push(user1); 

      varallMenu1 = 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){

          vararr=eval(data);

          alert(arr.length);

          for(varm = 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解析前端数据:

packagecom.tgb.web.controller.annotation;

  

importjava.io.IOException;

importjava.net.URLDecoder;

importjava.util.ArrayList; 

importjava.util.List;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importnet.sf.json.JSONArray;

importnet.sf.json.JSONObject;

importorg.springframework.stereotype.Controller;

importorg.springframework.web.bind.annotation.RequestMapping;

importcom.tgb.web.controller.entity.User;

  

@Controller

@RequestMapping("/user/data")

publicclassDataController {

    

  //接收前台传过来的字符串格式的json对象,在后台进行解析

  @RequestMapping("/resolveJsonObject" )

  publicvoidresolveJsonObject(HttpServletRequest request,HttpServletResponse response)throwsIOException {

    //解码

    String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8");

    JSONObject jb=newJSONObject(); 

    //将json格式的字符串转换为json对象,并取得该对象的“userName”属性值

    String o=(String)jb.fromObject(str).get("userName");

    System.out.println(o);

  } 

    

   //传递json数组字符串

  @RequestMapping("/resolveJsonArray")

  publicvoidresolveJsonArray(HttpServletRequest request,HttpServletResponse response)throwsIOException {

    //解码,为了解决中文乱码

    String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8");

    JSONObject jb=newJSONObject();

    //将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")

  publicvoidresolveJson(HttpServletRequest request,HttpServletResponse response)throwsIOException {

      

    List m = (List)newArrayList();

    JSONArray jsons =newJSONArray();

    for(inti=0;i<10;i++){

      User user =newUser();

      user.setUserName("name_"+ i);

      m.add(user);

    }

      

    for(intj=0;j<m.size();j++){

      JSONObject jsonObject =newJSONObject();

      jsonObject.put("user", m.get(j));

      jsons.add(jsonObject);

    }

    response.getWriter().print(jsons.toString()) ; 

  } 

    

  @RequestMapping("/toJson" ) 

  publicString toJson() {

    return"/json";

  }

}

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

没有了123 下一篇
上一页:没有了      下一页:java与testng利用XML做数据源的数据驱动实例详解