您的位置：首页 > Web前端 > JQuery

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

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

01
<%@
page language="java" contentType="text/html;charset=UTF-8"
02
pageEncoding="UTF-8"%>
03
<!DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
04
<
html
>
05
<
head
>
06
<
script
 
type
=
"text/javascript"
 
src
=
"/springMVC6/js/jquery-1.7.2.js"
></
script
>
07
<
meta
 
http-equiv
=
"Content-Type"
 
content
=
"text/html;
charset=UTF-8"
>
08
<
title
>Insert
title here</
title
>
09
<
script
 
type
=
"text/javascript"
>
10
 
11
$(document).ready(function(){
12
//传递字符串格式json对象到后台（一个json对象）
13
$("#resolveJsonObject").click(function(){
14
var
userName =encodeURI($("#userName").attr("value"));
15
var
age = encodeURI($("#age").attr("value"));
16
 
17
var
user = {userName:userName,age:age};
18
var
aMenu= encodeURI(JSON.stringify(user));
19
 
20
$.ajax({
21
 
url:"/springMVC6/user/data/resolveJsonObject"
,
22
 
data:"orderJson="
+aMenu, 
23
 
success:function(data){
24
 
25
}
26
});
27
});
28
 
29
//传递json数组到后台
30
$("#resolveJsonArray").click(function(){
31
var
userName =encodeURI($("#userName").attr("value"));
32
var
age = encodeURI($("#age").attr("value"));
33
 
34
//数组开始
35
var
user1 = {userName:userName,age:age};
36
var
allMenu={
37
"menu":[
]
38
};
39
allMenu.menu.push(user1);
40
var
allMenu1 = encodeURI(JSON.stringify(allMenu));
41
 
42
$.ajax({
43
//json数组
44
 
url:"/springMVC6/user/data/resolveJsonArray"
,
45
data:"orderJson="
+allMenu1,
46
success:function(data){
47
 
48
}
49
});
50
});
51
 
52
//接收后台的json在前台解析
53
$("#resolveJson").click(function(){
54
 
55
$.ajax({
56
//解析从后台返回的json数据
57
url:"/springMVC6/user/data/resolveJson"
,
58
type:"post", 
59
success:function(data){
60
var
arr=eval(data);
61
alert(arr.length);
62
for(var
m = 0;m<
arr.length
;m++){
63
alert(arr[m].user.userName);
64
}
65
}
66
});
67
});
68
});
69
 
70
</script>
71
</
head
>
72
<
body
>
73
<
h1
>json添加用户</
h1
>
74
 
75
姓名：<
input
 
id
=
"userName"
 
type
=
"text"
 
name
=
"userName"
>
76
年龄:<
input
 
id
=
"age"
 
type
=
"text"
 
name
=
"age"
><
br
>
77
<
input
 
type
=
"button"
 
id
=
"resolveJsonObject"
 
value
=
"json对象"
>
78
<
input
 
type
=
"button"
 
id
=
"resolveJsonArray"
 
value
=
"json数组"
>
79
<
input
 
type
=
"button"
 
id
=
"resolveJson"
 
value
=
"前端解析json字符串"
>
80
</
body
>
81
</
html
>


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

01
package
 
com.tgb.web.controller.annotation;
02
 
03
import
 
java.io.IOException;
04
import
 
java.net.URLDecoder;
05
import
 
java.util.ArrayList;
06
import
 
java.util.List;
07
import
 
javax.servlet.http.HttpServletRequest;
08
import
 
javax.servlet.http.HttpServletResponse;
09
import
 
net.sf.json.JSONArray;
10
import
 
net.sf.json.JSONObject;
11
import
 
org.springframework.stereotype.Controller;
12
import
 
org.springframework.web.bind.annotation.RequestMapping;
13
import
 
com.tgb.web.controller.entity.User;
14
 
15
@Controller
 
16
@RequestMapping
(
"/user/data"
)
17
public
 
class
 
DataController
{
18
 
19
//接收前台传过来的字符串格式的json对象，在后台进行解析
20
@RequestMapping
(
"/resolveJsonObject"
)
21
public
 
void
 
resolveJsonObject(HttpServletRequest
request,HttpServletResponse response)
throws
 
IOException
{
22
//解码
23
String
str = URLDecoder.decode(request.getParameter(
"orderJson"
),
"UTF-8"
);
24
JSONObject
jb=
new
 
JSONObject();
25
//将json格式的字符串转换为json对象，并取得该对象的“userName”属性值
26
String
o=(String)jb.fromObject(str).get(
"userName"
);
27
System.out.println(o);
28
}
29
 
30
 
//传递json数组字符串
31
@RequestMapping
(
"/resolveJsonArray"
 
)
32
public
 
void
 
resolveJsonArray(HttpServletRequest
request,HttpServletResponse response)
throws
 
IOException
{
33
//解码，为了解决中文乱码
34
String
str = URLDecoder.decode(request.getParameter(
"orderJson"
),
"UTF-8"
);
35
JSONObject
jb=
new
 
JSONObject();
36
//将json格式的字符串转换为json数组对象
37
JSONArray
array=(JSONArray)jb.fromObject(str).get(
"menu"
);
38
//取得json数组中的第一个对象
39
JSONObject
o = (JSONObject)array.get(
0
);
//获得第一个array结果
40
//取出json数组中第一个对象的“userName”属性值
41
String
name=o.get(
"userName"
).toString();
//获得属性值
42
System.out.println(name);
43
}
44
 
45
//通过该函数返回json格式的数据，在前台通过JQuery进行解析
46
@RequestMapping
(
"/resolveJson"
)
47
public
 
void
 
resolveJson(HttpServletRequest
request,HttpServletResponse response)
throws
 
IOException
{
48
 
49
List
m = (List)
new
ArrayList();
50
JSONArray
jsons =
new
 
JSONArray();
51
for
(
int
 
i=
0
;i<
10
;i++){
52
User
user =
new
 
User();
53
user.setUserName(
"name_"
 
+
i);
54
m.add(user);
55
}
56
 
57
for
(
int
 
j=
0
;j<m.size();j++){
58
JSONObject
jsonObject =
new
 
JSONObject();
59
jsonObject.put(
"user"
,
m.get(j));
60
jsons.add(jsonObject);
61
}
62
response.getWriter().print(jsons.toString())
;
63
}
64
 
65
@RequestMapping
(
"/toJson"
 
)
66
public
 
String
toJson(){ 
67
return
 
"/json"
;
68
}
69
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航