springMVC 框架下 JQuery 传递并解析 Json 数据
这里有新鲜出炉的 jQuery 示例, 程序狗速度看过来!
jQuery javascript 框架
jQuery 是一个兼容多浏览器的 javascript 框架, 核心理念是 write less,do more(写得更少, 做得更多)jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布, 吸引了来自世界各地的众多 JavaScript 高手加入, 由 Dave Methvin 率领团队进行开发
json 作为一种轻量级的数据交换格式, 在前后台数据交换中占据着非常重要的地位, 这篇文章主要介绍了 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(){
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="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 字符串进行传递, 效率就会提高很多
来源: http://www.phperz.com/article/18/0131/358870.html