SSH框架使用json,js,无刷新技术案例

SSH框架使用json,js,无刷新技术案例  现以文章记录，以免后续自己再花费大量时间处理这方面的问题，也方便正在研究这个的一些朋友

1.jsp页面（FaAnalysisAdd.jsp）

<tr>
   				<td>FA分析人员<input name="EMP" id="EMP"/><font color="red"></font></td>
   				<td>失效零件料号<input name="PARTNO" id="PARTNO"/><font color="red"></font></td>
   				<td>FA分析完成时间<input/></td>
   			</tr>

引用这个，不用多说了吧

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/analysis.js"></script>

2.analysis.js

var EMP = null;
var PARTNO = null;
var ROOT_CAUSE = null;
var CORRECTIVE_ACTIONS = null;
var flag1 = false;
var btn1 = null;

var path = $("#path").val();

$(function(){
		PARTNO  = $("#PARTNO");
		ROOT_CAUSE = $("#ROOT_CAUSE");
		CORRECTIVE_ACTIONS = $("#CORRECTIVE_ACTIONS");
		EMP  = $("#EMP");
        btn1 = $("#btn1");
        
       //初始化的时候，要把所有的提示信息变为：* 以提示必填项，更灵活，不要写在页面上
       EMP.next().html("*");
       PARTNO.next().html("*");
       ROOT_CAUSE.next().html("*");
       CORRECTIVE_ACTIONS.next().html("*");
       
       	/*
	   	 * 验证
	   	 * 失焦\获焦
	   	 * jquery的方法传递
	   	 */
       	PARTNO.bind("blur",function(){
	   		//ajax后台验证--PARTNO是否存在
       		//var path = ${pageContext.request.contextPath};
	   		$.ajax({
	   			type:"post",//请求类型
	   			url:"addJson.do",//请求的url
	   			data:{PARTNO:PARTNO.val()},//请求参数
	   			dataType:"json",//ajax接口（请求url）返回的数据类型
	   			success:function(data){//data：返回数据（json对象）
	   				var d = eval("("+data+")");
	   				if(d.PARTNO == "exists"){
	   					(PARTNO.next()).css({"color":"green"}).html(" 料号OK ");
	   					flag1 = true;
	   				}else{
	   					(PARTNO.next()).css({"color":"red"}).html("* 无此料号，请查证！ ");
	   					flag1 = false;
	   				}
	   			},
	   			error:function(data){//当访问时候，404，500 等非200的错误状态码
	   				(PARTNO.next()).css({"color":"red"}).html(" 程序内部错误！ ");
	   				flag1 = false;
	   			}
	   		});
	   	});
       
	     //工号长度
	   	EMP.bind("focus",function(){
	   		(EMP.next()).css({"color":"green"}).html("长度必须是6位");
	   	}).bind("blur",function(){
	   		if(EMP.val() != null && EMP.val().length ==6 ){
	   			(EMP.next()).css({"color":"green"}).html(" √ ");
	   			flag1 = true;
	   		}else{
	   			(EMP.next()).css({"color":"red"}).html("* 不符合规范，请重新输入");flag1 = false;
	   		}
	   	});
       
	   	
});

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.devMode" value="true" />
	<!-- 把action扩展名改为.do -->
	<constant name="struts.action.extension" value="do" />
	<!-- 把主题设为simple-->  
	<constant name="struts.ui.theme" value="simple" />
	
	<package name="default" namespace="/" extends="struts-default,json-default">
		<!-- 增加struts2與json能結合使用 -->
		<result-types>
			<result-type name="json" class="org.apache.struts2.json.JSONResult" />
		</result-types>
		<interceptors>
			<interceptor name="json"
				class="org.apache.struts2.json.JSONInterceptor" />
		</interceptors>
		
		<action name="addJson" class="pcpartner.com.action.FaAnalysisAction" method="addJson">
			<result type="json">
			<!-- result是action中设置的变量名，也是页面需要返回的数据，该变量必须有setter和getter方法 -->
                <param name="root">result</param>
            </result>
		</action>
		
		
	</package>
</struts>

4....com/action/FaAnalysisAction.java

package pcpartner.com.action;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import net.sf.json.JSONObject;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;

public class FaAnalysisAction extends ActionSupport {
	
	HttpServletRequest request = ServletActionContext.getRequest();
	
	private String result;
	Map<String, String> resultMap = new HashMap<String, String>();
	
	public String addJson(){
		if (request.getAttribute("PARTNO").equals("11")) {
			resultMap.put("PARTNO", "exists");
		}else {
			resultMap.put("PARTNO", "NO");
		}
		
		JSONObject json = JSONObject.fromObject(resultMap);//将map对象转换成json类型数据
		result = json.toString();//给result赋值，传递给页面
		return SUCCESS;
	}
	
	
	
	public Map<String, String> getResultMap() {
		return resultMap;
	}

	public void setResultMap(Map<String, String> resultMap) {
		this.resultMap = resultMap;
	}

	public String getResult() {
		return result;
	}

	public void setResult(String result) {
		this.result = result;
	}
}

5.包的配置

（包的下载地址：点击打开链接    http://download.csdn.net/download/lscbfntxgt/9964601）

注意：红色缺一不可，蓝色部分是struts2所需jar包，特别注意版本问题（jar包问题花费了我很多时间才搞定）

效果图：

如有问题或不足的地方，请留言！！！ 谢谢！