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

时间：2021-03-23 14:22:04

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包问题花费了我很多时间才搞定）

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

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


效果图：

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



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

标签：

相关文章