Java基础101 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能

Posted dshore123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Java基础101 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能相关的知识,希望对你有一定的参考价值。

1、效果图示  

技术图片

横线上方的部分不动(没有刷新),下方实现刷新(异步刷新)

2、实现步骤  

jquery+ajax+struts技术实现异步刷新功能的步骤:
    1、需要用到 jquery+ajax+struts 那么需要用几个包:(commons-logging-1.0.4.jar、freemarker-2.3.13.jar、ognl-2.6.11.jar、struts2-core-2.1.6.jar、xwork-2.1.2.jar、commons-fileupload-1.2.1.jar)
                  说明:  需要的包  六个基本包外加  json-lib.jar,struts2-json-plugin.jar,ezmorph.jar 这三个包
    
    2、加入 jquery.js ,调用 jquery里面的 ajax方法,$.get()、$.post()、$.getJSON();
    
    3、Action中 写 JSONObject
                          先将所有的值存入map中 ,然后将map集合转换为json对象
         JSONObject jo = JSONObject.fromObject(map);
    
    4、struts.xml中  设置result 的type=json  并且指定输入的 数据名称
        <result name="success" type="json">  
            <param name="root">outinfo</param>   
        </result>

3、相关代码  

页面端(index.jsp)

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>  
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 3 <html>  
 4     <head>  
 5         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 6         
 7           <script type="text/javascript" src="js/jquery.js" ></script> 
 8           
 9           <script type="text/javascript">
10               $( function()      
11                 //使用 Ajax 的方式 判断登录  
12                 $("#btn_login").click( function()      
13                     var url = ‘ajaxLogin.action‘;  
14                     //alert("===");  
15                     //获取表单值,并以json的数据形式保存到params中  
16                     var params =   
17                         loginName:$("#loginName").val(),  
18                         password:$("#password").val(),  
19                     ;
20                     
21                     /* //使用$.post方式          $.post(url,params,function(data)data,‘json‘);
22                     $.post(  
23                         url,  //服务器要接受的url  
24                         params,  //传递的参数       
25                         function cbf(data) //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据  
26                             //alert(data); 
27                             //eval里面的字符串以JavaScript的方式执行     //比如:eval(‘alert(‘你好!‘)‘); 
28                             var member = eval("("+data+")");    //包数据解析为json 格式    
29                             $(‘#result‘).html("欢迎您:  "+member.name+" -密码:"+member.pwd);  
30                         , 
31                         ‘json‘  //数据传递的类型  json  
32                     ); 
33                     */
34                    
35                      //上面注释掉的部分,和下面三行代码的效果是一样的
36                      $.getJSON(url,params,function(data) 
37                            var member = eval("("+data+")"); 
38                            $("#result").html("欢迎您哟:"+member.name+" -密码:"+member.pwd);
39                        );
40                 );  
41             );  
42         </script> 
43   </head>
44   
45   <body>
46        <span>用户名:</span>  
47        <input type="text" id="loginName" name="loginName">  
48        <br />  
49       
50        <span>&nbsp;&nbsp;&nbsp;码:</span>  
51        <input type="password" name="password" id="password">  
52        <br /> 
53       
54        <input type="button" id="btn_login" value="登录" /> 
55        
56        <br /> 
57        <hr/>
58        <p>  
59           这里显示ajax信息(即:异步刷新显示出下方的信息):  
60           <br /><br />  
61           <span id="result"></span>  
62        </p>  
63   </body>
64 </html>

struts.xml 配置文件

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
 3 <struts>
 4  <package name="ajax" extends="json-default">  
 5         <action name="ajaxLogin" class="com.shore.ajax.ation.AjaxLoginAction">  
 6             <!-- 返回类型为json 在sjon-default中定义 -->  
 7             <result name="success" type="json">  
 8                 <!-- root表示返回对象的层级为根部 root的值对应要返回的值的属性 -->  
 9                 <!-- 这里的outInfo值即是 对应action中的 outInfo -->  
10                 <param  name="root">outinfo</param>  <!-- 输出到页面的信息,JavaScript函数中的data参数接收此值 -->
11             </result>  
12         </action>  
13     </package>  
14 </struts>  

Action层下的 AjaxLoginAction 类

 1 package com.shore.ajax.ation;
 2 
 3 import java.util.HashMap;
 4 import java.util.Map;
 5 
 6 import net.sf.json.JSONObject;
 7 
 8 import com.opensymphony.xwork2.ActionSupport;
 9 
10 /**
11  * @author DSHORE/2019-8-1
12  *
13  */
14 public class AjaxLoginAction extends ActionSupport 
15     // 用户Ajax返回数据  
16     private String outinfo;  //输出信息
17     
18     // struts的属性驱动模式,自动填充页面的属性到这里  (注入)
19     private String loginName;  
20     private String password;  
21   
22     @Override  
23     public String execute()  
24         // 用一个Map做例子  
25         Map<String, String> map = new HashMap<String, String>();  
26         // 为map添加一条数据,记录一下页面传过来loginName  
27         map.put("name", this.loginName);  
28         map.put("pwd", this.password);
29         // 将要返回的map对象进行json处理  
30         JSONObject jo = JSONObject.fromObject(map); 
31 
32         // 调用json对象的toString方法转换为字符串然后赋值给outInfo  
33         this.outinfo = jo.toString();  
34         //测试一下outInfo的结果
35         System.out.println(this.outinfo);  
36   
37         return SUCCESS;  
38     
39 
40     public String getOutinfo() 
41         return outinfo;
42     
43     public void setOutinfo(String outinfo) 
44         this.outinfo = outinfo;
45     
46 
47     public String getLoginName() 
48         return loginName;
49     
50     public void setLoginName(String loginName) 
51         this.loginName = loginName;
52     
53 
54     public String getPassword() 
55         return password;
56     
57     public void setPassword(String password) 
58         this.password = password;
59     
60 

web.xml 配置文件

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app version="2.5" 
 3     xmlns="http://java.sun.com/xml/ns/javaee" 
 4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 6     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 7   <welcome-file-list>
 8     <welcome-file>index.jsp</welcome-file>
 9   </welcome-file-list>
10   
11   <filter>
12       <filter-name>struts2</filter-name>
13       <filter-class>
14           org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
15       </filter-class>
16   </filter>
17   
18   <filter-mapping>
19       <filter-name>struts2</filter-name>
20       <url-pattern>/*</url-pattern>
21   </filter-mapping>
22 </web-app>

实例效果图

技术图片

 

 

 

 

原创作者:DSHORE

作者主页:http://www.cnblogs.com/dshore123/

原文出自:https://www.cnblogs.com/dshore123/p/11284860.html

欢迎转载,转载务必说明出处。(如果本文对您有帮助,可以点击一下右下角的 推荐,或评论,谢谢!

以上是关于Java基础101 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能的主要内容,如果未能解决你的问题,请参考以下文章

Java基础----jdk环境变量的编写

Struts2基础-1- 简单java类实现Action控制器

java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFil

Struts2开发基础

Struts2 程序步骤

struts2 基础demo1