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

Struts2+JQuery+Json及JQuery相关插件的例子

2011-08-05 16:39 525 查看
注意事项:

1.开发时,应将工程及相应的页面数据库编码均设为:utf8解决乱码问题;

2.当前开发版本为struts2.1.8,不同的struts2版本会有不同的jar包需要引入,具体见readme.txt

3.autocomplete插件不是很完善,尚不能处理json数据;弹出层框架只针对图片(可修改格式适应其它形式)

readme.txt:

view plaincopy to clipboardprint?

1.JQuery的Ajax实现并与struts2的结合

2.配置过程:

a.新建web项目;

b.修改web.xml文件

c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar

commons-io.jar xwork-core-2.1.6.jar(这个包加上版本号,是因为下文要提到它),注意jar包支持

这六个包是struts必须依赖的jar包

d.配置jsp文件,在jsp里面添加jquery支持

e.配置action

f ( 一)在struts2.1.6之前的版本:

添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点,因为json大量引用了Apache commons的包,所以这里要一并加入,

需要的commons包共4个,除了commons的包外,还需要引入一个 ezmorph的包,所以这一步一共要引入7个包,列出如下:

commons-collections.jar commons-lang.jar

commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个

(二)struts2.1.6,添加jsonplugin0.34或者jsonplugin0.7

(三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit-plugin

3.插件使用:

1.validation插件:详见table-validation.jsp,主要为引入一个jquery.validate.js,获取相应的属性名来进行验证;

2.tablesort插件:目前用的是兼容中文的官网版本,一是可以实现自动排序,二是支持中文;要注意在table当中的格式,这点很重要

3.tablesortpager插件

JQuery与Json结合的一些注意事项:

1.$.get(url,data,function(data){

eval(data);

})

eval(data)将数据转换为js对象;

实际上如果返回的json对象,可通过将参数直接命名为json即可,如下

$.get(url.data,function(data){},"json")

2.取json属性时,尽量用中括号方式,原因是如果有数字属性会发生不识别的现象

eg:var a=obj["31001"];

//obj.31001则可能出错

解决办法有其它方式:比如将属性值31001改为s31001

3.乱码问题:

在struts1.2中,通过设置表头的编码来解决乱码问题,注意对于xml和json,要分别设置为text/xml和text/json

eg:response.setContentType("text/json; charset=utf-8");

1.JQuery的Ajax实现并与struts2的结合

2.配置过程:

a.新建web项目;

b.修改web.xml文件

c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar

commons-io.jar xwork-core-2.1.6.jar(这个包加上版本号,是因为下文要提到它),注意jar包支持

这六个包是struts必须依赖的jar包

d.配置jsp文件,在jsp里面添加jquery支持

e.配置action

f ( 一)在struts2.1.6之前的版本:

添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点,因为json大量引用了Apache commons的包,所以这里要一并加入,

需要的commons包共4个,除了commons的包外,还需要引入一个 ezmorph的包,所以这一步一共要引入7个包,列出如下:

commons-collections.jar commons-lang.jar

commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个

(二)struts2.1.6,添加jsonplugin0.34或者jsonplugin0.7

(三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit-plugin

3.插件使用:

1.validation插件:详见table-validation.jsp,主要为引入一个jquery.validate.js,获取相应的属性名来进行验证;

2.tablesort插件:目前用的是兼容中文的官网版本,一是可以实现自动排序,二是支持中文;要注意在table当中的格式,这点很重要

3.tablesortpager插件

JQuery与Json结合的一些注意事项:

1.$.get(url,data,function(data){

eval(data);

})

eval(data)将数据转换为js对象;

实际上如果返回的json对象,可通过将参数直接命名为json即可,如下

$.get(url.data,function(data){},"json")

2.取json属性时,尽量用中括号方式,原因是如果有数字属性会发生不识别的现象

eg:var a=obj["31001"];

//obj.31001则可能出错

解决办法有其它方式:比如将属性值31001改为s31001

3.乱码问题:

在struts1.2中,通过设置表头的编码来解决乱码问题,注意对于xml和json,要分别设置为text/xml和text/json

eg:response.setContentType("text/json; charset=utf-8");

1.struts.xml配置:

view plaincopy to clipboardprint?

<?xml version="1.0" encoding="UTF-8"?>

<!-- 指定Struts 2配置文件的DTD信息 -->

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.i18n.encoding" value="utf-8"></constant>

<package name="S2SHJQuery" extends="json-default">

<action name="show" class="action.ShowAction">

<result type="json"/>

</action>

</package>

</struts>

<?xml version="1.0" encoding="UTF-8"?>

<!-- 指定Struts 2配置文件的DTD信息 -->

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.<a href=http://biancheng.dnbcw.info/apache/>apache</a>.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.i18n.encoding" value="utf-8"></constant>

<package name="S2SHJQuery" extends="json-default">

<action name="show" class="action.ShowAction">

<result type="json"/>

</action>

</package>

</struts>

2.ShowAction.java配置 :

view plaincopy to clipboardprint?

package action;

import java.util.ArrayList;

import java.util.List;

import java.util.Map;

import org.apache.struts2.json.annotations.JSON;

import com.opensymphony.xwork2.ActionSupport;

public class ShowAction extends ActionSupport {

private String testvalue;

private String result;

private List<String> list;

private List<User> userlist;

private User user;

private Map<String, User> map;

private String[] autoarray;

public String[] getAutoarray() {

return autoarray;

}

public void setAutoarray(String[] autoarray) {

this.autoarray = autoarray;

}

@JSON(serialize=false)

public Map<String, User> getMap() {

return map;

}

public void setMap(Map<String, User> map) {

this.map = map;

}

@JSON(serialize=false)

public User getUser() {

return user;

}

public void setUser(User user) {

this.user = user;

}

@JSON(serialize=false)

public List<User> getUserlist() {

return userlist;

}

public void setUserlist(List<User> userlist) {

this.userlist = userlist;

}

@JSON(serialize=false)

public List<String> getList() {

return list;

}

public void setList(List<String> list) {

this.list = list;

}

public void setTestvalue(String testvalue) {

this.testvalue = testvalue;

}

@JSON(serialize=false)

public String getTestvalue() {

return testvalue;

}

@JSON(serialize=false)

public String getResult() {

return result;

}

public void setResult(String result) {

this.result = result;

}

@Override

public String execute() throws Exception {

// TODO Auto-generated method stub

System.out.println("test is ok: "+testvalue);

//1.????string

/*int i=9;

//result=""+i+"";

result="中国";*/

//2.list?

/*list=new ArrayList<String>();

list.add("allen");

list.add("中国");

list.add("adc");*/

//3.list?а?User

/*userlist=new ArrayList<User>();

User user1=new User();

user1.setPassword(1);

user1.setUsername("username1");

User user2=new User();

user2.setPassword(2);

user2.setUsername("username2");

User user3=new User();

user3.setPassword(3);

user3.setUsername("username3");

userlist.add(user1);

userlist.add(user2);

userlist.add(user3);*/

//4.User???????

/*user=new User();

user.setPassword(1);

String username="中国";

user.setUsername(username);

System.out.println(user.getUsername());

*/

//5.map????

/*map=new HashMap<String, User>();

User user1=new User();

user1.setPassword(1);

user1.setUsername("username1");

User user2=new User();

user2.setPassword(2);

user2.setUsername("username2");

User user3=new User();

user3.setPassword(3);

user3.setUsername("username3");

map.put("s1",user1 );

map.put("s2",user2 );

map.put("s3",user3 );*/

/*map=new HashMap<String, String>();//??????String,string???

map.put("s1","user1");

map.put("s2","user2");

map.put("s3","user3");*/

//7.直接传递数祖

autoarray=new String[3];

autoarray[0]="a";

autoarray[1]="b";

autoarray[2]="c";

return SUCCESS;

}

}

package action;

import java.util.ArrayList;

import java.util.List;

import java.util.Map;

import org.apache.struts2.json.annotations.JSON;

import com.opensymphony.xwork2.ActionSupport;

public class ShowAction extends ActionSupport {

private String testvalue;

private String result;

private List<String> list;

private List<User> userlist;

private User user;

private Map<String, User> map;

private String[] autoarray;

public String[] getAutoarray() {

return autoarray;

}

public void setAutoarray(String[] autoarray) {

this.autoarray = autoarray;

}

@JSON(serialize=false)

public Map<String, User> getMap() {

return map;

}

public void setMap(Map<String, User> map) {

this.map = map;

}

@JSON(serialize=false)

public User getUser() {

return user;

}

public void setUser(User user) {

this.user = user;

}

@JSON(serialize=false)

public List<User> getUserlist() {

return userlist;

}

public void setUserlist(List<User> userlist) {

this.userlist = userlist;

}

@JSON(serialize=false)

public List<String> getList() {

return list;

}

public void setList(List<String> list) {

this.list = list;

}

public void setTestvalue(String testvalue) {

this.testvalue = testvalue;

}

@JSON(serialize=false)

public String getTestvalue() {

return testvalue;

}

@JSON(serialize=false)

public String getResult() {

return result;

}

public void setResult(String result) {

this.result = result;

}

@Override

public String execute() throws Exception {

// TODO Auto-generated method stub

System.out.println("test is ok: "+testvalue);

//1.????string

/*int i=9;

//result=""+i+"";

result="中国";*/

//2.list?

/*list=new ArrayList<String>();

list.add("allen");

list.add("中国");

list.add("adc");*/

//3.list?а?User

/*userlist=new ArrayList<User>();

User user1=new User();

user1.setPassword(1);

user1.setUsername("username1");

User user2=new User();

user2.setPassword(2);

user2.setUsername("username2");

User user3=new User();

user3.setPassword(3);

user3.setUsername("username3");

userlist.add(user1);

userlist.add(user2);

userlist.add(user3);*/

//4.User???????

/*user=new User();

user.setPassword(1);

String username="中国";

user.setUsername(username);

System.out.println(user.getUsername());

*/

//5.map????

/*map=new HashMap<String, User>();

User user1=new User();

user1.setPassword(1);

user1.setUsername("username1");

User user2=new User();

user2.setPassword(2);

user2.setUsername("username2");

User user3=new User();

user3.setPassword(3);

user3.setUsername("username3");

map.put("s1",user1 );

map.put("s2",user2 );

map.put("s3",user3 );*/

/*map=new HashMap<String, String>();//??????String,string???

map.put("s1","user1");

map.put("s2","user2");

map.put("s3","user3");*/

//7.直接传递数祖

autoarray=new String[3];

autoarray[0]="a";

autoarray[1]="b";

autoarray[2]="c";

return SUCCESS;

}

}

3.show.jsp配置:

view plaincopy to clipboardprint?

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<mce:script type="text/javascript" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>

<base href="<%=basePath%>">

<title>struts2+jquery+json</title>

<mce:script type="text/javascript"><!--

//1.struts2+jquery+json单独传递单个参数

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

//data += decodeURI(data.shtml) ;

alert("成功");

alert(data.result);

},

error: function(){

alert("失败");

}

})

})

})*/

//2.jquery单独传递含单个参数的list

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

var jsonobject=data.list;

for(var j=0;j<jsonobject.length;j++)

{

alert(jsonobject[j]);

}

},

error: function(){

alert("失败");

}

})

})

})*/

//3.jquery单独传递含对象类型User的list

$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

var jsonobject=data.userlist;

/*for(var j=0;j<jsonobject.length;j++)

{

alert(jsonobject[j].username);

alert(jsonobject[j].password);

}

*/

$.each(jsonobject,function(key,value){

alert(key+" "+value.username);

alert(key+" "+value.password);

})

}

,

error: function(){

alert("失败");

}

})

})

})

//4.jquery单独传递User对象类型

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

success:function(data){

var jsonobject=data.user;

alert(jsonobject.username);

},

error: function(){

alert("失败");

}

})

})

})*/

//5.jquery传递含User对象类型的map类型

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

var jsonobject=data.map;

alert(data.map.s1.username);//一步一步获取值

$.each(data.map,function(key,value){

alert(key+": "+value.username);

})

},

error: function(){

alert("失败");

}

})

})

})*/

// --></mce:script>

</head>

<body>

<form>

<input type="button" value="JQuery" id="jquerytest"><br>

<input type="text" value="美国" name="test" id="test">

</form>

</body>

</html>

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<mce:script type="text/javascript" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>

<base href="<%=basePath%>">

<title>struts2+jquery+json</title>

<mce:script type="text/javascript"><!--

//1.struts2+jquery+json单独传递单个参数

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

//data += decodeURI(data.shtml) ;

alert("成功");

alert(data.result);

},

error: function(){

alert("失败");

}

})

})

})*/

//2.jquery单独传递含单个参数的list

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

var jsonobject=data.list;

for(var j=0;j<jsonobject.length;j++)

{

alert(jsonobject[j]);

}

},

error: function(){

alert("失败");

}

})

})

})*/

//3.jquery单独传递含对象类型User的list

$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

var jsonobject=data.userlist;

/*for(var j=0;j<jsonobject.length;j++)

{

alert(jsonobject[j].username);

alert(jsonobject[j].password);

}

*/

$.each(jsonobject,function(key,value){

alert(key+" "+value.username);

alert(key+" "+value.password);

})

}

,

error: function(){

alert("失败");

}

})

})

})

//4.jquery单独传递User对象类型

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

contentType: "application/x-www-form-urlencoded; charset=UTF-8",

success:function(data){

var jsonobject=data.user;

alert(jsonobject.username);

},

error: function(){

alert("失败");

}

})

})

})*/

//5.jquery传递含User对象类型的map类型

/*$(function(){

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

var params={testvalue:$('#test').val()};

$.ajax({

url:"show.action",

data:params,

type:'post',

dataType:'json',

success:function(data){

var jsonobject=data.map;

alert(data.map.s1.username);//一步一步获取值

$.each(data.map,function(key,value){

alert(key+": "+value.username);

})

},

error: function(){

alert("失败");

}

})

})

})*/

// --></mce:script>

</head>

<body>

<form>

<input type="button" value="JQuery" id="jquerytest"><br>

<input type="text" value="美国" name="test" id="test">

</form>

</body>

</html>

http://www.360doc.com/content/10/0731/19/117897_42788515.shtml
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: