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>密 码：</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 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |
原文地址：https://www.cnblogs.com/dshore123/p/11284860.html
时间： 2024-10-06 11:14:16