`
dreamoftch
  • 浏览: 496565 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

总结一下这次用ajax/json实现SSH

阅读更多

首先最简单的来说:

引入struts2-json-plugin jar包

	<package name="myjson" extends="json-default">
		<action name="getJson" class="userAction" method="getJson">
			<result type="json">
				<param name="root">jsonResult</param>
			</result>
		</action>
	</package>

action 中的方法:

	public String getJson(){
		jsonResult = new HashMap<String, Object>();
		User user = new User(); 
		user.setName("username");
		user.setId(110);
		user.setPassword("password");
		jsonResult.put("user", user);
		return SUCCESS;
	}

 页面:

<script type="text/javascript">
		function getJson(){
			$.getJSON("getJson.action", function(json){
			  alert(json.user);
			});
		}
	</script>

  

 

实现的大概功能很简单:输入关键字查询,结果关键字红色显示,批量删除,分页,等等,前台通过ajax获取json数据,然后显示。可以每页显示25,50,75条数据,可以直接跳转到指定页。。。

 

页面通过jquery的 post方法,设置返回值类型为json,struts2里面,在struts.xml中引入json-default,即可引入result的type为json的类型,这样返回给前台的数据就是json格式,里面封装了action里面可以通过get方法获取到的属性,如果不希望某属性被添加到json里面,可以通过@JSON(serialize=false)在它的get方法上注解一下就好了。。。

 

首先是 web.xml:

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

	 <listener>
        <listener-class>
			org.springframework.web.context.ContextLoaderListener
		</listener-class>
     </listener>
     
	<filter>
		<filter-name>struts2Filter</filter-name>
		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>struts2Filter</filter-name>
		<url-pattern>/*</url-pattern>
		<dispatcher>REQUEST</dispatcher>
		<dispatcher>FORWARD</dispatcher>
	</filter-mapping>
	
</web-app>

 web.xml里面没有什么东东,只有一个启动spring的监听器和struts2的filter

 

 

接下来是applicationcontext.xml:

 

 

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:jee="http://www.springframework.org/schema/jee" 
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx" 
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:task="http://www.springframework.org/schema/task"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
	http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
	http://www.springframework.org/schema/tx
	http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
	http://www.springframework.org/schema/jee
	http://www.springframework.org/schema/jee/spring-jee-3.0.xsd
	http://www.springframework.org/schema/context
	http://www.springframework.org/schema/context/spring-context-3.0.xsd
	http://www.springframework.org/schema/aop
	http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
	http://www.springframework.org/schema/task
	http://www.springframework.org/schema/task/spring-task-3.0.xsd"
	default-lazy-init="false">
	<!-- 这里是把action交给spring来管理 -->
	<bean id="myAction" class="action.MyAction"></bean>
	 
	<bean id="dataSource"  
        class="org.apache.commons.dbcp.BasicDataSource">
		<property name="driverClassName" value="com.mysql.jdbc.Driver" />
		<property name="url" value="jdbc:mysql://localhost:3306/testdb" />
		<property name="username" value="root" />
		<property name="password" value="root" />
	</bean>

	<bean id="sessionFactory"  
        class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">  
		<property name="dataSource">
			<ref bean="dataSource" />
		</property>
		<property name="mappingDirectoryLocations">
			<list>
				<value>classpath:mapping</value>
			</list>
		</property>  
		<property name="hibernateProperties">  
            <props>
            	<prop key="hibernate.dialect">org.hibernate.dialect.MySQLDialect</prop>
            	 <prop key="hbm2ddl.auto">update</prop> 
            	<prop key="hibernate.show_sql">true</prop>
            </props>
        </property>  
	</bean>

	<bean id="transactionManager"
		class="org.springframework.orm.hibernate3.HibernateTransactionManager">
		<property name="sessionFactory" ref="sessionFactory" />
	</bean>
	  
	<bean id="userDao" class="dao.UserDao">
		<property name="sessionFactory" ref="sessionFactory"></property>
	</bean>
	
	<bean id="userService" class="service.UserService">
		<property name="userDao" ref="userDao"></property>
	</bean>
	
	<tx:advice id="TestAdvice" transaction-manager="transactionManager">
    <tx:attributes>
      <tx:method name="save*" propagation="REQUIRED"/>
      <tx:method name="del*" propagation="REQUIRED"/>
      <tx:method name="update*" propagation="REQUIRED"/>
      <tx:method name="add*" propagation="REQUIRED"/>
      <tx:method name="find*" propagation="REQUIRED" read-only="true"/>
      <tx:method name="get*" propagation="REQUIRED" read-only="true"/>
      <tx:method name="apply*" propagation="REQUIRED"/>
    </tx:attributes>
	</tx:advice>
 
	<aop:config>
		<aop:pointcut id="allTestServiceMethod" expression="execution(* service.*.*(..))"/>
		<aop:advisor pointcut-ref="allTestServiceMethod" advice-ref="TestAdvice" />
	</aop:config>
</beans>

 

 

都是很简单的东东,自己做测试的东东嘛。。。就图个简单

 

下面是struts.xml

 

 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
        "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<!-- 开发阶段设置 -->
	<constant name="struts.devMode" value="true" />
	<constant name="struts.serve.static.browserCache " value="false" />
	<constant name="struts.configuration.xml.reload" value="true" />

	<package name="" extends="json-default">
		<action name="testAction" class="action.MyAction" method="method1">
			<result>/page/MyJsp.jsp</result>
		</action>
		<action name="getJson" class="action.MyAction" method="getJson">
			<result type="json"></result>
		</action>
		<action name="deleteRecord" class="action.MyAction" method="deleteRecord">
			<result type="chain">getJson</result>
		</action>
	
	</package>
</struts>

 这里面注意是

 

<package name="" extends="json-default">   <!-- 这里继承的json-default包 -->

 

<action name="getJson" class="action.MyAction" method="getJson">
	<result type="json"></result>   <!-- 这里是json的结果类型 -->
</action>

所以需要额外引入   struts2-json-plugin-2.3.12.jar  这个jar包。。。

 

下面是我的action类:

 

package action;

import java.util.List;

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

import service.UserService;

import com.opensymphony.xwork2.ActionSupport;

import condition.QueryCondition;

import entity.User;

public class MyAction extends ActionSupport{
	private static final long serialVersionUID = 1L;
	private List<User> users;
	private UserService userService;    //进行调用的service类,它再调用Dao操作数据库,这里就不上代码了
	private QueryCondition queryCondition;
	private int time;
	private String flag;
	
	public String getJson(){
		return method1();
	}
	
	public String method1(){
		/**
		 * 初始化查询参数
		 */
		if(null == queryCondition){
			queryCondition = new QueryCondition();
		}
		queryCondition.setPageNum(queryCondition.getPageNum() > 0 ? queryCondition.getPageNum() : 1);
		if(null != queryCondition.getName()){
			queryCondition.setName(queryCondition.getName().trim());
		}
		getTotal();   //查询总页数
		//如果要查询的页数大于总页数,则将查询页数改为总页数
		if(queryCondition.getPageNum()>queryCondition.getTotalNum()){
			queryCondition.setPageNum(queryCondition.getTotalNum());
		}
		users = userService.getUsersByUsernameOrRealname(queryCondition.getName(),queryCondition.getPageNum(),queryCondition.getSize(),
				queryCondition.getOrderBy());
		return "success";
	}
	
	public String deleteRecord(){
		userService.deleteRecord(queryCondition.getUserIDs());
		return "success";
	}
	
	public int getTotal(){
		if(null != queryCondition.getName()){
			queryCondition.setName(queryCondition.getName().trim());
		}
		int result = userService.getTotalNum(queryCondition.getName());
		int size = queryCondition.getSize() !=0 ? queryCondition.getSize() :25;
		if(result%size == 0){
			queryCondition.setTotalNum(result/size);
		}else{
			queryCondition.setTotalNum(result/size+1);
		}
		return queryCondition.getTotalNum();
	}
	
	@JSON(serialize=false) //表明这个属性不需要被序列化为json的属性,下同
	public String getFlag() {
		return flag;
	}

	public void setFlag(String flag) {
		this.flag = flag;
	}
	@JSON(serialize=false)
	public int getTime() {
		return time;
	}

	public void setTime(int time) {
		this.time = time;
	}
	@JSON(serialize=false)
	public UserService getUserService() {
		return userService;
	}

	public QueryCondition getQueryCondition() {
		return queryCondition;
	}

	public void setQueryCondition(QueryCondition queryCondition) {
		this.queryCondition = queryCondition;
	}
	
	public void setUserService(UserService userService) {
		this.userService = userService;
	}

	public List<User> getUsers() {
		return users;
	}

	public void setUsers(List<User> users) {
		this.users = users;
	}
}

 

action里面用到的DTO:QueryCondition.java

 

package condition;

/**
 * 
 * Created on Mar 11, 2013
 * <p>Title:       
 * <p>Description: [查询条件的javabean]</p>
 * <p>Copyright:   Copyright (c) 2012</p>
 * <p>Company:     </p>
 * <p>Department:  
 * @author        
 * @version        1.0
 */
public class QueryCondition {

	private String name;  //用户输入参数
	private int pageNum;  //当前页数
	private int size;   //每页大小
	private int totalNum;  //总页数
	private String orderBy;  //排序依据
	private int orderByUsername;
	private int orderByRealName;
	private int orderByMobile;
	private String userIDs;
	
	public String getUserIDs() {
		return userIDs;
	}

	public void setUserIDs(String userIDs) {
		this.userIDs = userIDs;
	}

	public int getOrderByUsername() {
		return orderByUsername;
	}

	public void setOrderByUsername(int orderByUsername) {
		this.orderByUsername = orderByUsername;
	}

	public int getOrderByRealName() {
		return orderByRealName;
	}

	public void setOrderByRealName(int orderByRealName) {
		this.orderByRealName = orderByRealName;
	}

	public int getOrderByMobile() {
		return orderByMobile;
	}

	public void setOrderByMobile(int orderByMobile) {
		this.orderByMobile = orderByMobile;
	}

	public String getOrderBy() {
		return orderBy;
	}

	public void setOrderBy(String orderBy) {
		this.orderBy = orderBy;
	}

	public int getPageNum() {
		return pageNum;
	}

	public void setPageNum(int pageNum) {
		this.pageNum = pageNum;
	}

	public int getSize() {
		return size;
	}

	public void setSize(int size) {
		this.size = size;
	}

	public int getTotalNum() {
		return totalNum;
	}

	public void setTotalNum(int totalNum) {
		this.totalNum = totalNum;
	}

	public String getName() {
		return name;
	}
	
	public void setName(String name) {
		this.name = name;
	}
	
}

 User.java:

package entity;

import java.util.Date;

public class User {
	private String userID;
	private String email;
	private String askme;
	private String authenticate;
	private String password;
	private String username;
	private String nickname;
	private String leftSize;
	private Date registerTime;
	private UserInfo userInfo;
	
	public User(){
		
	}
	public User(String userID,String username,String realName,String mobile){
		this.username=username;
		this.userID=userID;
		userInfo=new UserInfo();
		this.userInfo.setRealName(realName);
		this.userInfo.setMobile(mobile);
	}
	
	public String getUserID() {
		return userID;
	}
	public void setUserID(String userID) {
		this.userID = userID;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public UserInfo getUserInfo() {
		return userInfo;
	}
	public void setUserInfo(UserInfo userInfo) {
		this.userInfo = userInfo;
	}
	public String getAskme() {
		return askme;
	}
	public void setAskme(String askme) {
		this.askme = askme;
	}
	public String getAuthenticate() {
		return authenticate;
	}
	public void setAuthenticate(String authenticate) {
		this.authenticate = authenticate;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getNickname() {
		return nickname;
	}
	public void setNickname(String nickname) {
		this.nickname = nickname;
	}
	public String getLeftSize() {
		return leftSize;
	}
	public void setLeftSize(String leftSize) {
		this.leftSize = leftSize;
	}
	public Date getRegisterTime() {
		return registerTime;
	}
	public void setRegisterTime(Date registerTime) {
		this.registerTime = registerTime;
	}
	

}

 UserInfo.java

package entity;

public class UserInfo {
	private String userID;
	private String realName;
	private String postcode;
	private String mobile;
	private String linkerPhone;
	private String userPost;
	private String department;
	private String userPhoto;
	private String userAddress;
	private String fax;
	private String usersex;
	private String userold;
	private String userdesc;
	private String provinceID;
	private String cityID;
	private String areaID;
	private User user;
	public String getUserID() {
		return userID;
	}
	public void setUserID(String userID) {
		this.userID = userID;
	}
	public String getRealName() {
		return realName;
	}
	public void setRealName(String realName) {
		this.realName = realName;
	}
	public User getUser() {
		return user;
	}
	public void setUser(User user) {
		this.user = user;
	}
	public String getPostcode() {
		return postcode;
	}
	public void setPostcode(String postcode) {
		this.postcode = postcode;
	}
	public String getMobile() {
		return mobile;
	}
	public void setMobile(String mobile) {
		this.mobile = mobile;
	}
	public String getLinkerPhone() {
		return linkerPhone;
	}
	public void setLinkerPhone(String linkerPhone) {
		this.linkerPhone = linkerPhone;
	}
	public String getUserPost() {
		return userPost;
	}
	public void setUserPost(String userPost) {
		this.userPost = userPost;
	}
	public String getDepartment() {
		return department;
	}
	public void setDepartment(String department) {
		this.department = department;
	}
	public String getUserPhoto() {
		return userPhoto;
	}
	public void setUserPhoto(String userPhoto) {
		this.userPhoto = userPhoto;
	}
	public String getUserAddress() {
		return userAddress;
	}
	public void setUserAddress(String userAddress) {
		this.userAddress = userAddress;
	}
	public String getFax() {
		return fax;
	}
	public void setFax(String fax) {
		this.fax = fax;
	}
	public String getUsersex() {
		return usersex;
	}
	public void setUsersex(String usersex) {
		this.usersex = usersex;
	}
	public String getUserold() {
		return userold;
	}
	public void setUserold(String userold) {
		this.userold = userold;
	}
	public String getUserdesc() {
		return userdesc;
	}
	public void setUserdesc(String userdesc) {
		this.userdesc = userdesc;
	}
	public String getProvinceID() {
		return provinceID;
	}
	public void setProvinceID(String provinceID) {
		this.provinceID = provinceID;
	}
	public String getCityID() {
		return cityID;
	}
	public void setCityID(String cityID) {
		this.cityID = cityID;
	}
	public String getAreaID() {
		return areaID;
	}
	public void setAreaID(String areaID) {
		this.areaID = areaID;
	}
	
	
	
}

 

接下来是最后最重要的页面:MyJsp.jsp

<%@ page language="java"  pageEncoding="utf-8" isELIgnored="false"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
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>
    <base href="<%=basePath%>">
    <title>jsp page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		tbody .hover {background-color: gray;}
	</style>
	<script type="text/javascript" src="/test/js/jquery-1.3.2.js"></script>
	<script type="text/javascript">
		//给按钮绑定提交事件
		$(function(){
			$("#_button").click(function(){
				$("#pageNum").val("");
				tijiao();
			});
			$("#_delete").click(function(){
				deleteRecord();
			});
			$("#_content tr").hover(
			  function () {
				$(this).addClass("hover");
			  },
			  function () {
			    $(this).removeClass("hover");
			  });
			var totalNum=${queryCondition.totalNum};
			var pageNum=${queryCondition.pageNum};
		    for(var i=1;i<=totalNum;i++){
		    	if(pageNum == i){
		    		$("#_pageNum").append("<option value='" + i + "' selected='selected'>" + i + "</option>");
		    	}else{
		    		$("#_pageNum").append("<option value='" + i + "'>" + i + "</option>");
		    	}
		    }
		    var keywords = $("#_input").val();
			if(keywords){
				var value;
				var regExp = new RegExp(keywords,"g");
				$("._name").each(function(){
					value = $(this).html();
					value = value.replace(regExp,"<font color='red'>"+keywords+"</font>");
					$(this).html(value);
				});
			}
		});
		//监听键盘回车事件
		function enter_Key(event){
			if(event.keyCode == 13){
				$("#pageNum").val("");
				tijiao();
				return false;
			}
		}
		//跳转到指定页
		function goPage(pageNum){
			$("#pageNum").val(pageNum);
			tijiao();
		}
		//提交action
		function tijiao(){
			getJson();
		}	
		//通过ajax删除数据
		function ajaxDelete(){
			var data =  $("form").serialize(); 
			$.post("deleteRecord", data,
					   function(result){
					      fillPage(result); //填充table内容
					   }, "json");
		}
		//通过ajax提交请求(返回结果为json类型)
		function getJson(){
			var data =  $("form").serialize(); //序列化对象,将整个form中的属性全部放到data中
			$.post("getJson", data,
					   function(result){
					      fillPage(result);  //填充table内容
					   }, "json");
		}
		//填充table内容
		function fillPage(results){
			var content = $("#_content2");    
			content.empty();    //清空table的内容
			var num = results.users.length;
			var users = results.users;
			var user;
			//通过循环来遍历json数据,填充table
			for(var i=0;i<num;i++){
				user = users[i];
				content.append("<tr>"+
				    				"<td><input type='checkbox' id='"+user.userID+"' class='_userID'></td>"+
				    				"<td class='_name'>"+user.username+"</td>"+
				    				"<td class='_name'>"+user.userInfo.realName+"</td>"+
				    				"<td>"+user.userInfo.mobile+"</td>"+
	    						"</tr>");
			}
			//设置隐藏域中的属性
			$("#pageNum").val(results.queryCondition.pageNum); 
			$("#orderBy").val(results.queryCondition.orderBy);
			$("#_userIDs").val(results.queryCondition._userIDs);
			$("#_orderByUsername").val(results.queryCondition.orderByUsername);
			$("#_orderByRealName").val(results.queryCondition.orderByRealName);
			$("#_orderByMobile").val(results.queryCondition.orderByMobile);
			$("#_input").val(results.queryCondition.name);
			$("#_totalNum").empty();
			$("#_totalNum").append(results.queryCondition.totalNum);   // 修改总页数
			$("#_size").val(results.queryCondition.size);
			$("#_pageNum").empty(); 
			var totalNum = results.queryCondition.totalNum;
			var pageNum = results.queryCondition.pageNum;    // 修改当前页
			for(var i=1;i<=totalNum;i++){
		    	if(pageNum == i){
		    		$("#_pageNum").append("<option value='" + i + "' selected='selected'>" + i + "</option>");
		    	}else{
		    		$("#_pageNum").append("<option value='" + i + "'>" + i + "</option>");
		    	}
		    }
		    //修改button的disable属性
		    if(totalNum<=1){
				$("#_firstPage").attr("disabled",true);
				$("#_previousPage").attr("disabled",true);
				$("#_nextPage").attr("disabled",true);
				$("#_lastPage").attr("disabled",true);
			}else if(totalNum>1){
				if(pageNum>1){
					if(pageNum<totalNum){   //总页数大于当前页数  并且当前页数大于1
						$("#_firstPage").attr("disabled",false);
						$("#_previousPage").attr("disabled",false);
						$("#_nextPage").attr("disabled",false);
						$("#_lastPage").attr("disabled",false);
					}else if(pageNum==totalNum){   //总页数大于1  并且当前页数等于总页数
						$("#_firstPage").attr("disabled",false);
						$("#_previousPage").attr("disabled",false);
						$("#_nextPage").attr("disabled",true);
						$("#_lastPage").attr("disabled",true);
					}
				}else if(pageNum==1){   //总页数大于1  并且当前页数等于1
					$("#_firstPage").attr("disabled",true);
					$("#_previousPage").attr("disabled",true);
					$("#_nextPage").attr("disabled",false);
					$("#_lastPage").attr("disabled",false);
				}
			}
			//鼠标hover的时候背景变色
		    $("#_content tr").hover(
					  function () {
						$(this).addClass("hover");
					  },
					  function () {
					    $(this).removeClass("hover");
			});
                        对关键字进行变色处理,关键字变红色
			var keywords = $("#_input").val();
			if(keywords){
				var value;
				var regExp = new RegExp(keywords,"g");//string.replace需要一个RegExp对象
				$("._name").each(function(){
					value = $(this).html();
					value = value.replace(regExp,"<font color='red'>"+keywords+"</font>");
					$(this).html(value);
				});
			}
		}	
		//删除选中记录
		function deleteRecord(){
			var userIDs="";
			$("input:checked._userID").each(function(){
				userIDs+=$(this).attr("id")+","
			});
			if("" != userIDs){
				userIDs = userIDs.substr(0,userIDs.length-1);
				$("#_userIDs").val(userIDs);
				ajaxDelete();
			}else if("" === userIDs){
				alert('请选择要删除的记录');
			}
			
		}
		//跳转第一页
		function goFirst(){
			$("#pageNum").val(1);
			tijiao();
		}
		//跳转上一页
		function goPrevious(){
			var n=parseInt($("#pageNum").val())-1;
			$("#pageNum").val(n);
			tijiao();
		}
		//跳转下一页
		function goNext(){
			var n=parseInt($("#pageNum").val())+1; 
			$("#pageNum").val(n);
			tijiao();
		}
		//跳转最后一页
		function goLast(){
			$("#pageNum").val(${queryCondition.totalNum});
			tijiao();
		}
		//点击表头排序
		var orderByUsername ;
		var orderByRealName ;
		var orderByMobile ;
		function orderBy(i){
			if(i == 1){
				return;
			}else if(i == 2){
				if($("#_orderByUsername").val()){
					orderByUsername = parseInt($("#_orderByUsername").val());
				}else{
					orderByUsername=1;
				}
				orderByUsername++;
				$("#_orderByUsername").val(orderByUsername);
				if(orderByUsername%2==0){
					$("#orderBy").val("username");
				}else if(orderByUsername%2==1){
					$("#orderBy").val("username desc");
				}
			}else if(i == 3){
				if($("#_orderByRealName").val()){
					orderByRealName = parseInt($("#_orderByRealName").val());
				}else{
					orderByRealName=1;
				}
				orderByRealName++;
				$("#_orderByRealName").val(orderByRealName);
				if(orderByRealName%2==0){
					$("#orderBy").val("realName");
				}else if(orderByRealName%2==1){
					$("#orderBy").val("realName desc");
				}
			}else if(i == 4){
				if($("#_orderByMobile").val()){
					orderByMobile = parseInt($("#_orderByMobile").val());
				}else{
					orderByMobile=1;
				}
				orderByMobile++;
				$("#_orderByMobile").val(orderByMobile);
				if(orderByMobile%2==0){
					$("#orderBy").val("mobile");
				}else if(orderByMobile%2==1){
					$("#orderBy").val("mobile desc");
				}
			}
			tijiao();
		}
		//全选
		function checkAll(){
			$("._userID").each(function(){
				$(this).attr('checked',true);
			});
		}
		
		function unCheckAll(){
			$("._userID").each(function(){
				$(this).attr('checked',false);
			});
		}
	</script>
  </head>
  <body>
    <form id="myAction" action="testAction" method="post">
    	<table align="center" cellspacing="0" border="0" width="80%">
    		<tr>
    			<td width="30%">用户名或真实名:
    				<input type="text" id="_input" name="queryCondition.name" value="${queryCondition.name}" onkeydown="return enter_Key(event)">
    			</td>
    			<td align="left" width="10%"><input type="button" value="搜索" id="_button"></td>
    			<td width="20%"></td>
    			<td width="20%"></td>
    		</tr>
    	</table>
    	<br/>
    	<div id="_content">
    	<table align="center" cellspacing="0" border="1" width="80%"  rules="all">
    	<thead>
    		<tr>
    			<th width="10%"><input type="checkbox" id="_checkAll" onclick="checkAll()">全选/反选</th>
    			<th onclick="orderBy(2)" width="20%">用户名</th>
    			<th onclick="orderBy(3)" width="20%">真实姓名</th>
    			<th onclick="orderBy(4)" width="30%">手机号</th>
    		</tr>
    		</thead>
    		<tbody id="_content2">
    		<s:iterator value="users" var="user" status="status">
    			<tr>
    				<td><input type="checkbox" id="${userID}" class="_userID"></td>
    				<td class="_name"><s:property value="#user.username" escape="false"/></td>
    				<td class="_name"><s:property value="#user.userInfo.realName" escape="false"/></td>
    				<td><s:property value="#user.userInfo.mobile" escape="false"/></td>
    			</tr>
    		</s:iterator>
    		</tbody>
    	</table>
    	</div>
    	
		<table align="center" cellspacing="0" border="0" width="80%">
			<tr>
				<td><input type="button" onclick="checkAll()" value="全选">
				<input type="button" onclick="unCheckAll()" value="取消">
				<input type="button" id="_delete" value="删除"></td>
				<td id="_footer">			
		    		一共<span id="_totalNum">
		    		<s:if test="queryCondition.totalNum>0"><s:property value="queryCondition.totalNum"/></s:if></span>页
		    		每页显示
		    		<select name="queryCondition.size" onchange="tijiao()" id="_size">
		    			<s:if test="queryCondition.size == 25">
			    			<option value="25" selected="selected">25</option>
			    			<option value="50">50</option>
			    			<option value="75">75</option>
		    			</s:if>
		    			<s:elseif test="queryCondition.size == 50">
		    				<option value="25">25</option>
			    			<option value="50" selected="selected">50</option>
			    			<option value="75">75</option>
		    			</s:elseif>
		    			<s:elseif test="queryCondition.size == 75">
		    				<option value="25">25</option>
			    			<option value="50">50</option>
			    			<option value="75" selected="selected">75</option>
		    			</s:elseif>
		    			<s:else>
		    				<option value="25" selected="selected">25</option>
			    			<option value="50">50</option>
			    			<option value="75">75</option>
		    			</s:else>
		    		</select>
		    		条
		    		第<s:if test="queryCondition.totalNum>0">
		    		<select name="pageNum" onchange="goPage(this.value)" id="_pageNum">
							    			
		    		</select>
		    		</s:if>页
		    	</td>
				<td>
			    	<s:if test="queryCondition.pageNum>0&&queryCondition.totalNum>0&&queryCondition.pageNum!=1">
			    				<input type="button"  onclick="goFirst();" value="第一页" id="_firstPage"></s:if>
			    	<s:else><input type="button"  onclick="goFirst();" value="第一页" disabled="disabled" id="_firstPage"></s:else>
		    	
			    	<s:if test="queryCondition.totalNum>1&&queryCondition.pageNum>1">
			    				<input type="button"  onclick="goPrevious()" value="上一页" id="_previousPage"></s:if>
			    	<s:else><input type="button"  onclick="goPrevious()" value="上一页" disabled="disabled" id="_previousPage"></s:else>
		    				
			    	<s:if test="queryCondition.totalNum>1&&(queryCondition.pageNum lt queryCondition.totalNum)">
			    				<input type="button"  onclick="goNext()" value="下一页" id="_nextPage"></s:if>
			    	<s:else><input type="button"  onclick="goNext()" value="下一页" disabled="disabled" id="_nextPage"></s:else>	
		    	
			    	<s:if test="queryCondition.totalNum>0&&queryCondition.pageNum!=queryCondition.totalNum">
			    				<input type="button"  onclick="goLast()" value="最后一页" id="_lastPage"></s:if>
			    	<s:else><input type="button"  onclick="goLast()" value="最后一页" disabled="disabled" id="_lastPage"></s:else>	
		    	</td>
		    	<td width="20%"></td>
	    	</tr>
    	</table>
    	<s:if test="queryCondition.totalNum>0">
    				<input type="hidden" id="pageNum" name="queryCondition.pageNum" value="${queryCondition.pageNum}"></s:if>
    	<input type="hidden" id="orderBy" name="queryCondition.orderBy">
    	<input type="hidden" id="_userIDs" name="queryCondition.userIDs">
    	<input type="hidden" id="_orderByUsername" name="queryCondition.orderByUsername" value="${queryCondition.orderByUsername}">
    	<input type="hidden" id="_orderByRealName" name="queryCondition.orderByRealName" value="${queryCondition.orderByRealName}">
    	<input type="hidden" id="_orderByMobile" name="queryCondition.orderByMobile" value="${queryCondition.orderByMobile}">
    </form>
  </body>
</html>

 

 

 

好的,完工。。。其中的一些代码都写了注释,比较啰嗦,也没进行优化之类的。。。

 

分享到:
评论

相关推荐

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    总结来说,这个压缩包提供的示例是一个基于SSH后端、jQuery前端和JSON数据交换的Ajax级联操作实现,旨在展示如何优雅地处理Web应用中的动态数据加载。这种技术组合大大提高了用户体验,因为用户无需刷新整个页面就能...

    json+ssh+ajax

    可能的情况是,这个项目使用SSH连接到远程服务器,然后使用AJAX技术来实现在用户界面中的实时数据更新,而这些数据可能是通过JSON格式交换的。这样,用户可以在不刷新页面的情况下获取服务器上的信息,同时,由于...

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    SSH框架ajax获取的json格式数据处理过程

    在本文中,我们将详细讲解如何使用 SSH 框架中的 Ajax 获取的 JSON 格式数据处理过程,并且实现菜单联动下拉框的功能。 一、Ajax 中 response 返回的数据是一个二维数组 在 Ajax 中,response 返回的数据是一个二...

    java_cPP.zip_json+jsp_ssh ajax json_ssh json

    标题中的"java_cpp.zip_...总结起来,这个压缩包内容涵盖了Java Web开发的核心技术,包括Java的分页处理、SSH框架的使用、JSON数据交换以及AJAX的异步通信。学习和理解这些技术,对于成为一名全面的Web开发者至关重要。

    ajax json mysql ssh 三级联动

    这种联动通常用Ajax实现,通过改变一个下拉框的值触发Ajax请求,服务器返回相应级别的数据(通常是JSON格式),然后JavaScript更新其他下拉框的选项。 在实现这个功能时,我们可能需要以下步骤: 1. **前端准备**...

    SSH+AJAX数据操作(json)

    总结来说,"SSH+AJAX数据操作(json)"项目展示了如何利用Spring、Struts2和Hibernate构建后端服务,通过AJAX和JSON技术实现实时、无刷新的前端交互。这不仅提高了用户界面的响应速度,也降低了服务器负载,是现代...

    SSH+Ajax+JSON省市级联效果Spring+Struts+Hibernate+Jquery

    SSH+Ajax+JSON在Web开发中的应用主要集中在构建动态、响应迅速的用户界面,这里我们主要探讨Spring、Struts、Hibernate这三大框架如何与Ajax和JSON技术结合,以实现省市级联选择的效果。 首先,Spring是Java企业级...

    ssh整合+JSON+Jquery+Ajax

    SSH整合指的是Spring、Struts和Hibernate这三大框架的集成应用,它们是...这些文件共同构成了一个完整的SSH+JSON+Jquery+Ajax的示例应用,展示了如何在实际开发中有效地组合使用这些技术,以实现高效、互动的Web应用。

    SSH-Ajax.zip_SSH+ajax_SSH使用Ajax_ajax ssh_ssh ajax_ssh怎么用ajax

    然而,现代的Ajax实现往往不再局限于XML,而是使用JSON或其他更轻量级的数据格式。 将SSH与Ajax结合使用,可以构建出高性能、用户友好的Web应用。例如,在SSH框架中,我们可以利用Struts的Action和Spring的Service...

    在maven+ssm&ssh;中使用ajax处理json数据

    在提供的压缩包文件中,可能包含了两个项目实例,一个是基于SSM,另一个基于SSH,分别展示了如何在这两种框架下实现Ajax与JSON的交互。通过研究这些示例,你可以更深入地了解如何在实际项目中应用这些技术。 总之,...

    ssh实现ajax分页

    本篇将详细讲解如何使用SSH(Spring、Struts2、Hibernate)框架结合JSON、jQuery和MySQL数据库来实现Ajax分页。 首先,SSH框架是Java Web开发中的一个流行组合,Spring提供了依赖注入和事务管理,Struts2负责MVC...

    简单的SSH整合,用到MySql数据库,使用ajax和json

    在SSH整合中,前端使用Ajax发送异步请求,获取后台处理后的数据。而Json(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在这里,服务器端通过Struts返回...

    SSH+ztree+ajax+json

    在SSH+ztree+ajax+json项目中,Ajax可能被用于异步地从服务器获取数据(例如JSON格式),然后动态地更新ZTree的节点,提供更流畅的用户体验。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于...

    json2+jsonplugin struts2整合ajax时,使用json时需要的jar包

    在Struts2框架中整合Ajax以实现异步数据交互,JSON(JavaScript Object Notation)扮演了关键角色。JSON是一种轻量级的数据交换格式,它允许Web应用与服务器之间高效地传输数据,而无需进行繁琐的HTTP请求。在这个...

    ssh2+ajax+jquery+json 登陆验证

    本文将围绕SSH2框架、Ajax、jQuery和JSON这些技术展开讨论,并结合给定的部分内容来深入分析如何利用这些技术进行用户名验证。 ### SSH2框架 SSH2框架是指Spring、Struts2和Hibernate三个开源框架的集成应用,它们...

    JSON+SSH框架搭建的项目

    前端页面通过Ajax发送请求到后端,后端使用Struts的Action接收请求,然后调用Spring的服务层方法,该方法可能通过Hibernate查询数据库获取数据,最后将这些数据转化为JSON格式并返回给前端。前端接收到JSON响应后,...

    ssh实现ajax

    以下是使用SSH和Ajax实现页面无刷新验证的一般步骤: 1. **前端实现**:在HTML页面中,添加表单元素,如用户名和密码输入框,并设置事件监听器,如`onsubmit`或`onclick`,当用户提交表单时触发Ajax请求。 2. **...

    ssh整合系统分页ajax

    在SSH项目中,可以使用jQuery或其他JavaScript库配合Ajax发送异步请求,后端服务器处理请求后返回JSON或XML数据,前端通过JavaScript更新DOM节点,实现页面的局部刷新。这样既能提高用户体验,又能减少服务器负载。 ...

Global site tag (gtag.js) - Google Analytics