struts2 jquery json进行ajax请求(1)

struts2jqueryjson进行ajax请求

2010-05-2515:31

第一步:创建名为"ajax"的JavaWeb项目。

第二步:加入struts2的jar包,这里需要四个包freemarker.jarognl.jarstruts2-core.jarcommons-fileupload.jarcommons-io.jarxwork-core-2.1.6.jar(这个包加上版本号,是因为下文要提到它),这六个包是struts必须依赖的jar包,什么好说的。

第三步:修改web.xml加入struts的过滤器,代码如下:

viewplaincopytoclipboardprint?

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appversion="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<filter>

<filter-name>struts2</filter-name>

<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>

</filter>

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appversion="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<filter>

<filter-name>struts2</filter-name>

<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>

</filter>

<filter-mapping>

<filter-name>struts2</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

第四步:加入json的包,这里需要两个:json-lib.jarjsonplugin.jar这里要注意很重要的一点,因为json大量引用了Apachecommons的包,所以这里要一并加入,需要的commons包共4个,除了commons的包外,还需要引入一个ezmorph的包,所以这一步一共要引入7个包,列出如下:commons-collections.jarcommons-lang.jarcommons-beanutils.jarcommons-logging.jarezmorph.jar再加上json的两个包共七个,一次性加入。

第五步:写后台处理AjaxLoginAction.action,内容如下:

viewplaincopytoclipboardprint?

packageqy.test.action;

importjava.util.HashMap;

importjava.util.Map;

importnet.sf.json.JSONObject;

importcom.opensymphony.xwork2.ActionSupport;

publicclassAjaxLoginActionextendsActionSupport{

//用户Ajax返回数据

privateStringresult;

//struts的属性驱动模式,自动填充页面的属性到这里

privateStringloginName;

privateStringpassword;

@Override

publicStringexecute(){

//用一个Map做例子

Map<String,String>map=newHashMap<String,String>();

//为map添加一条数据,记录一下页面传过来loginName

map.put("name",this.loginName);

//将要返回的map对象进行json处理

JSONObjectjo=JSONObject.fromObject(map);

//调用json对象的toString方法转换为字符串然后赋值给result

this.result=jo.toString();

//可以测试一下result

System.out.println(this.result);

returnSUCCESS;

}

//gettersetter方法省略

}

packageqy.test.action;

importjava.util.HashMap;

importjava.util.Map;

importnet.sf.json.JSONObject;

importcom.opensymphony.xwork2.ActionSupport;

publicclassAjaxLoginActionextendsActionSupport{

//用户Ajax返回数据

privateStringresult;

//struts的属性驱动模式,自动填充页面的属性到这里

privateStringloginName;

privateStringpassword;

@Override

publicStringexecute(){

//用一个Map做例子

Map<String,String>map=newHashMap<String,String>();

//为map添加一条数据,记录一下页面传过来loginName

map.put("name",this.loginName);

//将要返回的map对象进行json处理

JSONObjectjo=JSONObject.fromObject(map);

//调用json对象的toString方法转换为字符串然后赋值给result

this.result=jo.toString();

//可以测试一下result

System.out.println(this.result);

returnSUCCESS;

}

//gettersetter方法省略

}

第六步:写前台index.jsp,注意加入jquery的js文件内容如下:

viewplaincopytoclipboardprint?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<mce:scripttype="text/javascript"src="js/jquery-1.3.2.min.js"mce></mce:script>

<mce:scripttype="text/javascript"><!--

$(document).ready(function(){

//使用Ajax的方式判断登录

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

varurl='ajaxLogin.action';

alert("===");

//获取表单值,并以json的数据形式保存到params中

varparams={

loginName:$("#loginName").val(),

password:$("#password").val(),

}

//使用$.post方式

$.post(

url,//服务器要接受的url

params,//传递的参数

functioncbf(data){//服务器返回后执行的函数参数data保存的就是服务器发送到客户端的数据

//alert(data);

varmember=eval("("+data+")");//包数据解析为json格式

$('#result').html("欢迎您:"+member.name);

},

'json'//数据传递的类型json

);

});

});

//--></mce:script>

</head>

<body>

<span>用户名:</span>

<inputtype="text"id="loginName"name="loginName">

<br/>

<span>密码:</span>

<inputtype="password"name="password"id="password">

<br/>

<inputtype="button"id="btn_login"value="Login"/>

<p>

这里显示ajax信息:

<br/>

<spanid="result"></span>

</p>

</body>

</html>

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<mce:scripttype="text/javascript"src="js/jquery-1.3.2.min.js"mce></mce:script>

<mce:scripttype="text/javascript"><!--

$(document).ready(function(){

//使用Ajax的方式判断登录

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

varurl='ajaxLogin.action';

alert("===");

//获取表单值,并以json的数据形式保存到params中

varparams={

loginName:$("#loginName").val(),

password:$("#password").val(),

}

//使用$.post方式

$.post(

url,//服务器要接受的url

params,//传递的参数

functioncbf(data){//服务器返回后执行的函数参数data保存的就是服务器发送到客户端的数据

//alert(data);

varmember=eval("("+data+")");//包数据解析为json格式

$('#result').html("欢迎您:"+member.name);

},

'json'//数据传递的类型json

);

});

});

//--></mce:script>

</head>

<body>

<span>用户名:</span>

<inputtype="text"id="loginName"name="loginName">

<br/>

<span>密码:</span>

<inputtype="password"name="password"id="password">

<br/>

<inputtype="button"id="btn_login"value="Login"/>

<p>

这里显示ajax信息:

<br/>

<spanid="result"></span>

</p>

</body>

</html>

第七步:在src目录下加入struts.xml,并配置相应的xml文件,为ajax请求提供数据。代码如下:

viewplaincopytoclipboardprint?

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"

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

<struts>

<packagename="ajax"extends="json-default">

<actionname="ajaxLogin"class="qy.test.action.AjaxLoginAction">

<!--返回类型为json在sjon-default中定义-->

<resulttype="json">

<!--root的值对应要返回的值的属性-->

<!--这里的result值即是对应action中的result-->

<paramname="root">result</param>

</result>

</action>

</package>

</struts>

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"

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

<struts>

<packagename="ajax"extends="json-default">

<actionname="ajaxLogin"class="qy.test.action.AjaxLoginAction">

<!--返回类型为json在sjon-default中定义-->

<resulttype="json">

<!--root的值对应要返回的值的属性-->

<!--这里的result值即是对应action中的result-->

<paramname="root">result</param>

</result>

</action>

</package>

</struts>

第八步:如果第四步没有加入commons-logging.jar包,这里要记得加入

第九步:发布运行。很不幸,你会发现一个错误,

java.lang.ClassNotFoundException:com.opensymphony.xwork2.util.TextUtils:

这是struts的版本错误,因为用的xwork2.1.6-core.jar中不存在TextUtils类,这里把xwork2.1.2-core.jar也加到classpath中,xwork2.1.2-core.jar中包含这个东西,我们用的是xwork2.1.6的jar,当要用到TextUtils时,就去xwork2.1.2-core.jar中找。

相关推荐