天易28----struts2.1和ajax json的簡單使用__js

一：效果預覽 說明：這裡沒有做任何樣式的布局，只是簡單的實現功能而已 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 stubStringBuffer 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"?><beansxmlns="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){ //$.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>");    });  }