天易28-struts2.1跟ajax json的简单使用 _JavaScript

天易28----struts2.1和ajax json的简单使用

一：效果预览

说明：这里没有做任何样式的布局，只是简单的实现功能而已

1）用户名和密码都为空：

2）用户名和密码不正确：

3）用户名和密码输入正确：

二：代码演示：

1）项目目录演示：

2）action代码（为了方便这里用户名和密码是固定写死的，没有访问数据库，可根据需要连接数据库进行用户名校验）：

package com.test.action;

import com.opensymphony.xwork2.ActionSupport;
import com.test.bean.AjaxBean;

public class AjaxLoginAction extends ActionSupport{

	private String method;
	private String info;
	private AjaxBean ab;
	public String execute() {
		String url = "fail";
		try{
			if("login".equals(this.getMethod())){
				url=this.login();
			}
		}catch(Exception err){
			err.printStackTrace();
		}
		return url;
	}

	/**
	 * json登陆测试
	 * @return String
	 */
	private String login(){
		//System.out.println("name and pass11111===================>>>>>>>"+ab.getUsername()+" "+ab.getPassword());
		if((ab.getUsername()==null || ab.getUsername().equals("")) || (ab.getPassword()==null || ab.getPassword().equals(""))){
			this.setInfo("用户名或密码为空,请填写用户名或密码!");
		}
		else if(!ab.getUsername().equals("wzh") || !ab.getPassword().equals("123")){
			this.setInfo("用户名或密码输入有误,请输入正确的用户名和密码！");
		}else{
			this.setInfo("登陆成功！");
		}
		return "loginsuccess";
	}

	public String getMethod() {
		return method;
	}

	public void setMethod(String method) {
		this.method = method;
	}

	
	public String getInfo() {
		return info;
	}

	public void setInfo(String info) {
		this.info = info;
	}

	public AjaxBean getAb() {
		return ab;
	}

	public void setAb(AjaxBean ab) {
		this.ab = ab;
	}
	
	
}

3）实体类bean代码（为了方便将username和password两个参数放到原有的实体类里，这里只用username和password两个即可）：

package com.test.bean;

import java.io.Serializable;

public class AjaxBean implements Serializable {

	private String id;
	private String sfdm;
	private String sflbbh;
	private String ywmc;
	private String xz;
	private String rksj;
	private String gxsj;
	private String zt;
	private String fplb_id;
	private String zdyflag;
	private String msfbz;
	private String bm;
	private String jmbz;
	private String sfbz;
	
	private String username;
	private String password;
	//组装sql语句
	public String getWhere() {
		// TODO Auto-generated method stub
		StringBuffer sql = new StringBuffer(" WHERE 1=1 ");
		if(sfdm!=null&&!"".equals(sfdm.trim())){
			sql.append(" AND SFDM = '"+sfdm+"'");
		}if(ywmc!=null&&!"".equals(ywmc.trim())){
			sql.append(" AND YWMC LIKE '%"+ywmc+"%'");
		}
		
		return sql.toString();
		
	}
	
	
	
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getSfdm() {
		return sfdm;
	}
	public void setSfdm(String sfdm) {
		this.sfdm = sfdm;
	}
	public String getSflbbh() {
		return sflbbh;
	}
	public void setSflbbh(String sflbbh) {
		this.sflbbh = sflbbh;
	}
	public String getYwmc() {
		return ywmc;
	}
	public void setYwmc(String ywmc) {
		this.ywmc = ywmc;
	}
	public String getXz() {
		return xz;
	}
	public void setXz(String xz) {
		this.xz = xz;
	}
	public String getRksj() {
		return rksj;
	}
	public void setRksj(String rksj) {
		this.rksj = rksj;
	}
	public String getGxsj() {
		return gxsj;
	}
	public void setGxsj(String gxsj) {
		this.gxsj = gxsj;
	}
	public String getZt() {
		return zt;
	}
	public void setZt(String zt) {
		this.zt = zt;
	}
	public String getFplb_id() {
		return fplb_id;
	}
	public void setFplb_id(String fplb_id) {
		this.fplb_id = fplb_id;
	}
	public String getZdyflag() {
		return zdyflag;
	}
	public void setZdyflag(String zdyflag) {
		this.zdyflag = zdyflag;
	}
	public String getMsfbz() {
		return msfbz;
	}
	public void setMsfbz(String msfbz) {
		this.msfbz = msfbz;
	}
	public String getBm() {
		return bm;
	}
	public void setBm(String bm) {
		this.bm = bm;
	}
	public String getJmbz() {
		return jmbz;
	}
	public void setJmbz(String jmbz) {
		this.jmbz = jmbz;
	}
	public String getSfbz() {
		return sfbz;
	}
	public void setSfbz(String sfbz) {
		this.sfbz = sfbz;
	}
	
	
}

4）struts.xml配置文件（这里我用的是引进的配置文件struts-system.xml,这里只看下面ajax json的配置即可）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
    "http://struts.apache.org/dtds/struts-2.1.7.dtd">
<struts>
	<package name="ajaxtestwzh" namespace="/" extends="global">	
		<action name="ajaxtest" class="ajaxAction">
			<result name="selectDataSuccess">/WEB-INF/jsp/ajaxTestList.jsp</result>
		</action>
	</package>
	
	<!-- 使用ajax json异步交互测试的配置开始 -->
	<package name="default" namespace="/" extends="json-default"><!-- 这里注意包名的配置 -->
        <action name="loginjsontest" class="loginjsonAction">  
            <!-- 返回单个值的result -->  
            <result name="loginsuccess" type="json"></result>  
        </action>  
    </package>  
    <!-- 使用ajax json异步交互测试的配置结束 -->
</struts>

5）applicationContext.xml配置文件（只看最下面的ajax json的配置即可）

<?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:p="http://www.springframework.org/schema/p"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd">
	<!-- 数据源配置 -->
	
	<bean id="sfdataSource"
		class="org.apache.commons.dbcp.BasicDataSource"
		destroy-method="close">
		<property name="driverClassName"
			value="oracle.jdbc.driver.OracleDriver">
		</property>
		<property name="url"
			value="jdbc:oracle:thin:@192.168.1.8:1521:ORCL">
		</property>
		<property name="username" value="azc2012"></property>
		<property name="password" value="azc2012"></property>
		<property name="maxActive" value="300"></property>
		<property name="maxIdle" value="20"></property>
		<property name="maxWait" value="1000"></property>
		<property name="removeAbandoned" value="true"></property>
		<property name="removeAbandonedTimeout" value="360"></property>
		<property name="logAbandoned" value="true"></property>
		<property name="defaultAutoCommit" value="true"></property>
	</bean>
	<bean id="ajaxjdbctemplate" class="org.springframework.jdbc.core.JdbcTemplate" abstract="false" lazy-init="default" autowire="default">
           <property name="dataSource">
                 <ref local="sfdataSource" />
           </property>
     </bean>

	<!-- 测试配置开始 -->
	<bean id="ajaxAction" class="com.test.action.AjaxTest" scope="prototype">
		<property name="asService" ref="asService"></property>
	</bean>

	<bean id="asService" class="com.test.service.impl.AjaxServiceImpl" scope="prototype">
		<property name="adDao" ref="adDao"></property>
	</bean>
	<bean id="adDao" class="com.test.dao.AjaxDao" scope="prototype">
	 	<property name="ajaxjdbctemplate" ref="ajaxjdbctemplate"></property><!-- 这里如果使用ajaxjdbctemplate那么需要在dao层生成它的get和set方法，并且不用继承JdbcDaoSupport这个类;
	 																		如果直接使用<property name="dataSource" ref="dataSource"></property>则不用再在dao层声明直接继承JdbcDaoSupport这个类调用该类访问数据库的方法即可 -->
	</bean>
	<!-- 测试配置结束 -->
	
	<!-- ajax json配置开始 -->
	<bean id="loginjsonAction" class="com.test.action.AjaxLoginAction" scope="prototype">
	</bean>
	<!-- ajax json配置结束 -->
</beans>

6）login.jsp页面（需要引进jquery.js和login.js(自己所写的js)）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<html>
  <head>
    <base href="<%=basePath%>">
    <title>ajax测试查询</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<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">
	<script type="text/javascript" src="<%=basePath%>jslib/jquery-1.4.js"></script>
	<script type="text/javascript" src="<%=basePath%>jslib/jquery.js"></script>
	<script type="text/javascript" src="<%=basePath%>js/login.js"></script>
	
</head>
<BODY>
<form action="" name="formName" method="post" style="margin:0px" id="formName" theme="simple">
<table border="0" width="99%" cellspacing="0" cellpadding="0" id="maintb" align="center">
	<tr>
		<td align="center">
		<table width="100%"  border="0"  cellspacing="0" cellpadding="0" id="mainbox" style="background:url(images/usermessage_02.gif); background-repeat:repeat-x; margin-top:5px;" >
		<tr>
           <td colspan="3">
            <table width="100%" border="0" cellpadding="0" cellspacing="0"   style="border-collapse:collapse;" id="tj" align="center">
		 <tr>
		 <td>
		用户名：
		<input type="text" id="usernameId"><label></label><br/>
		密   码：
		<input type="text" id="passId"><label></label><br/>
		<input type="button" id="ywmcId" value=" 登 陆 " onclick="login()"/>    
		<br/>
		
		<div id="message"></div>  
		
		</td>
		</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
                            		<!--页面主体内容开始-->
                            		<!--查询条件-->
                            			<!--查询结果-->

</body>
</html>

7）login.js代码：

function login(){
    var username=$("#usernameId").val();
	var userpass=$("#passId").val();
	$.getJSON("loginjsontest.action?method=login&ab.username="+username+"&ab.password="+userpass,function(data){  
   	//通过.操作符可以从data.message中获得Action中info的值  
  	 $("#message").html("<font color='red'>"+data.info+"</font>");  
  	});  
}