Ajax 局部刷新

最新推荐文章于 2025-12-02 21:20:38 发布

原创最新推荐文章于 2025-12-02 21:20:38 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #web.xml #javascript #ViewUI

AJAX 同时被 3 个专栏收录

3 篇文章

订阅专栏

HTTPRequest

3 篇文章

订阅专栏

JSON

2 篇文章

订阅专栏

本文介绍如何在Struts框架下使用按钮触发局部数据刷新。具体步骤包括：前台配置jsp和js，实现按钮点击调用Ajax请求；后台配置处理请求并返回数据；通过Struts配置连接前后台。

通过button按钮刷新页面数据：

1.前台配置jsp和js：

1.1 在<head>标签之前添加

<%
   String path = request.getContextPath();
%>

1.2 添加应用访问路径

<script type="text/javascript">
        var appPath = '<%=path%>';
</script>

1.3 <body>标签内容

<p>Welcome to the site <b id='boldStuff'>dude</b> </p> 
<input type='button' onclick='getInfo()' value='Change Text'/>

1.4 js方法

//struts request
function getInfo()
  {
      var xhr = getXHR();
      xhr.open("POST", appPath+"/queryAction.do?method=getPageDetailInfo", true);
      alert(appPath);
      xhr.onreadystatechange = function() 
      {
          if (xhr.readyState == 4) 
          { 
              var empInfo = xhr.responseText;
              changeText(empInfo);
          }
      }
      xhr.send();
  }
//ajax request
 function getXHR()
  {
      try
      {
           return new XMLHttpRequest();
      }
      catch(e)
      {
          try
          {
              return new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch(e)
      {
          return new ActiveXObject("Msxml2.XMLHTTP");
          }
      }
  }
//change data
function changeText(html){
	var html = '<table><tr><td>123</td><td>456</td></tr><tr><td>789</td><td>0000</td></tr></table>';
	document.getElementById('boldStuff').innerHTML = html;
}

2.后台数据响应

/**
     * 
     * {ajax局部数据请求}
     * @param mapping
     * @param form
     * @param request
     * @param response
     * @return
     * @author:王传对 wchd0215@gmail.com
     * @throws IOException 
     */
    public ActionForward getPageDetailInfo(ActionMapping mapping,ActionForm form,HttpServletRequest request,
            HttpServletResponse response) throws IOException{
        String resultHTMLString = "<table border=\"1\">";
        for(int i = 0;i<3;i++){
            resultHTMLString += "<tr><td>"+1+"</td><td>"+2+"</td></tr>";
        }
        resultHTMLString += "</table>";
        JSONObject obj = new JSONObject();  
        obj.put("resultHTMLString1", resultHTMLString);
        obj.put("resultHTMLString2", resultHTMLString);
        response.getWriter().write(obj.toString());  
        return null;
    }

3.Struts相关配置

<action type="**.QueryAction" 
     parameter="method" 
     scope="request" 
     path="/queryAction" 
     name="qeuryForm">
<forward name="success" path="/**.jsp" />
<forward name="fail" path="/**.jsp" />
</action>

最后在web.xml加载struts配置，启动工程，效果如下：

Onclick之前：