Struts2+Spring 整合成功测试案例----利用Dojo实现简单的Ajax的效果

简介:

利用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>
二、定义异步表单。
         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,如需转载请自行联系原作者

相关文章
QGS
|
8月前
|
XML 前端开发 JavaScript
手搭手Ajax经典基础案例省市联动
手搭手Ajax经典基础案例省市联动
QGS
22 1
|
8月前
|
前端开发 JavaScript
$.ajax GET请求案例
$.ajax GET请求案例
30 0
|
1月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
77 0
|
17小时前
|
前端开发 JavaScript Java
Spring创建Ajax和接受Ajax数据-spring20
Spring创建Ajax和接受Ajax数据-spring20
|
1天前
|
JSON 前端开发 JavaScript
Struts2处理(jQuery)Ajax请求(2)
Struts2处理(jQuery)Ajax请求
|
1天前
|
JSON 前端开发 JavaScript
Struts2处理(jQuery)Ajax请求(1)
Struts2处理(jQuery)Ajax请求
|
1月前
|
前端开发 JavaScript
Ajax基本案例详解之$.ajax的实现
Ajax基本案例详解之$.ajax的实现
|
1月前
|
JavaScript 前端开发 Java
jquery ajax+spring mvc上传文件
jquery ajax+spring mvc上传文件
|
11月前
|
JSON 前端开发 Java
Java Web应用开发案例|使用AJAX实现省市区三级联动效果
使用AJAX实现省市区三级联动效果,即选择省后,该省下的所有市数据动态填充到下拉框中,区县数据也会根据市的变化而动态填充该市下的区县数据。
124 0
Java Web应用开发案例|使用AJAX实现省市区三级联动效果
|
1月前
|
XML 前端开发 JavaScript
AJAX概念及入门案例
AJAX概念及入门案例
30 0