利用Dojo实现简单的Ajax的效果 .
继续使用上两个案例的代码。
一、安装Dojo插件,如下三个步骤:
1.导入jar包:struts2-dojo-plugin-2.1.8.1.jar ,复制到WEB-INF / lib 目录下。
2.在使用Dojo标签的Jsp页面使用如下代码导入Dojo标签:
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
3.在需要使用Dojo标签的JSP页面加入Dojo的head标签。如下代码所示:
<head>
......
<sx:head/>
</head>
</head>
二、定义异步表单。
1. 改写addperson.jsp 界面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
< %@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加界面</title>
<sx:head/>
</head>
<body>
<s:form action ="add.action" method="post">
<s:textfield name="per.pid" />
<s:textfield name="per.pname" />
<s:textfield name="per.page" />
<s:textfield name="per.paddr" />
<s:submit method="addui"/>
<s:submit value="List" method="listui"/>
<sx:submit value="List persons" method="listui" targets="show"/>
</s:form>
<div id=" show"></div></body>
</html>
2.新增界面listperson.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
< %@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title></head>
<body><div id="allTypes" >
<table border='1'>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
<th>动作</th>
<s:iterator value="lsPer" id="alltype">
<tr>
<td>
<input type="checkbox"
lang="<s:property value="#alltype.id"/>" /></td>
<td>
<s:property value="#alltype.pname"/>
</td>
<td>
<s:property value="#alltype.page"/>
</td>
<td>
<s:property value="#alltype.paddr"/>
</td>
<td>
<a href="#">编辑</a>/<a href="#">删除</a>
</td>
</tr>
</s:iterator>
</table>
</div>
</body>
</html>
3.改写struts.xml
<?xml version="1.0" encoding="UTF-8"?><!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>
<constant name="struts.objectFactory" value="spring"></constant>
<package name="person" extends="struts-default" namespace="/">
<action name="add" class="personAction" method="addui">
<!-- <result name="input">/addperson.jsp</result> -->
<result name="success">/success.jsp</result>
<result name="error">/addperson.jsp</result>
</action>
<action name="addlist" class="personAction" method="listui">
<result name="success">/listperson.jsp</result>
</action>
</package></struts>
4.启动Server进行测试。
.......................
继续Ajax的学习...................
经过几番搜索+测试,利用jquery+Json写了个实现Ajax效果实例,批量显示数据。此数据接上节内容。
一、准备工作jar包
1.commons-beanutils-1.8.0.jar
2.commons-collections-3.2.1.jar
3.commons-collections.jar
4.ezmorph-1.0.6.jar
5.javassist-3.11.0.GA.jar
6.json.jar
7.json-lib-2.4-jdk15.jar
8.struts2-json-plugin-2.3.4.jar
.....
二、导入Js :jquery-1.4.4.js
存放路径为:../WebContent/js/jquery-1.4.4.js.
三、修改PersonAction.java
public class PersonAction extends ActionSupport {
private PersonService personService;
private String result;
private Person per=new Person();List<Person> lsPer =new ArrayList<>();
public Person getPer() {
return per;
}
public void setPer(Person per) {
this.per = per;
}
public PersonService getPersonService() {
return personService;
}
public void setPersonService(PersonService personService) {
this.personService = personService;
}
public String addui() throws Exception{
if (0==per.getPid()||""==per.getPname()||0==per.getPage()|| ""==per.getPaddr())
{
return ERROR;
}
else
{
System.out.println("#########################");
personService.InsertPer(per);
//lsPer=personService.listPer();
/**
lsPer=personService.listPer();
for (int i=0;i<=lsPer.size()-1;i++){
System.out.println(lsPer.get(i));
}
**/
return SUCCESS;
}
}
public String listui() throws Exception{
System.out.println("WWWWWWWWWWWWWWWWWWWWWWWWW");
lsPer=personService.listPer();
return SUCCESS;
}
//新增内容:
public String listall() throws Exception{
System.out.println("=======================");
lsPer=personService.listPer();
JSONArray jo=JSONArray.fromObject(lsPer);
result=jo.toString();
System.out.println(result);
return SUCCESS;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}/**
public String execute() throws Exception {
System.out.println("#########################");
System.out.println(per.getPid());
System.out.println(per.getPname());
personService.InsertPer(per);
return SUCCESS;
}
**/
}
......
四、修改struts.xml
<?xml version="1.0" encoding="UTF-8"?><!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>
<constant name="struts.objectFactory" value="spring"></constant>
<package name="person" extends="struts-default" namespace="/">
<action name="add" class="personAction" method="addui">
<!-- <result name="input">/addperson.jsp</result> -->
<result name="success">/listperson.jsp</result>
<result name="error">/addperson.jsp</result>
</action>
<action name="addlist" class="personAction" method="listui">
<result name="success">/listperson.jsp</result>
</action>
</package>
<!-- json-dafault 继承了struts-default 所以在这里只继承extends="json-default" 即可-->
<package name="persons" extends=" json-default" namespace="/">
<action name="listAll" class="personAction" method="listall">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package></struts>
五、新增一个Jsp页面:allperson.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
< %@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>显示界面</title>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">$(document).ready(function(){
//使用 Ajax 的方式 判断
$("#allPer").click(function(){
var url='listAll.action';//获取表单值,并以json的数据形式保存到params中
var params={
};
//使用$.post方式
$.post(
url, //服务器要接受的url
params, //传递的参数
function dadf(datad){
//服务器返回后执行的函数 参数 data保存的是服务器发送到客户端的数据
// alert("dd====="+datad);
var dataArray=eval("("+datad+")"); //包数据解析为json格式
var count=dataArray.length;
for (var i=0;i<dataArray.length;i++){
$("#"+(i*5+1)).html(dataArray[i].id);
$("#"+(i*5+2)).html(dataArray[i].pname);$("#"+(i*5+3)).html(dataArray[i].page);
$("#"+(i*5+4)).html(dataArray[i].paddr);
}
},
'json' //数据传递的类型 json
);
});
});</script>
</head>
<body>
<input type="submit" id=" allPer" value="OK" />
<div id="show">
<label id='lop' value=""></label>
<table border='1'>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<%
for(int i=0;i<10;i++){
%>
<tr>
<td id="<%=i*5+1 %>"> id</td>
<td id="<%=i*5+2 %>"> pname</td>
<td id="<%=i*5+3 %>">page </td>
<td id="<%=i*5+4 %>">paddr</td></tr>
<%
}
%>
</table>
</div>
</body>
</html>
六、测
本文转自yunlielai51CTO博客,原文链接:http://blog.51cto.com/4925054/1148415,如需转载请自行联系原作者