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中找。
相关推荐
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo