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）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript">
$( function() {
//使用 Ajax 的方式 判断登录
$("#btn_login").click( function() {
var url = 'ajaxLogin.action';
//alert("===");
//获取表单值，并以json的数据形式保存到params中
var params = {
loginName:$("#loginName").val(),
password:$("#password").val(),
}; /* //使用$.post方式 $.post(url,params,function(data){data},'json');
$.post(
url, //服务器要接受的url
params, //传递的参数
function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
//alert(data);
//eval里面的字符串以JavaScript的方式执行 //比如：eval('alert('你好！')');
var member = eval("("+data+")"); //包数据解析为json 格式
$('#result').html("欢迎您： "+member.name+" -密码："+member.pwd);
},
'json' //数据传递的类型 json
);
*/ //上面注释掉的部分，和下面三行代码的效果是一样的
$.getJSON(url,params,function(data){
var member = eval("("+data+")");
$("#result").html("欢迎您哟："+member.name+" -密码："+member.pwd);
});
});
});
</script>
</head> <body>
<span>用户名：</span>
<input type="text" id="loginName" name="loginName">
<br /> <span>密 码：</span>
<input type="password" name="password" id="password">
<br /> <input type="button" id="btn_login" value="登录" /> <br />
<hr/>
<p>
这里显示ajax信息(即：异步刷新显示出下方的信息)：
<br /><br />
<span id="result"></span>
</p>
</body>
</html>
struts.xml 配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
<package name="ajax" extends="json-default">
<action name="ajaxLogin" class="com.shore.ajax.ation.AjaxLoginAction">
<!-- 返回类型为json 在sjon-default中定义 -->
<result name="success" type="json">
<!-- root表示返回对象的层级为根部 root的值对应要返回的值的属性 -->
<!-- 这里的outInfo值即是 对应action中的 outInfo -->
<param name="root">outinfo</param> <!-- 输出到页面的信息，JavaScript函数中的data参数接收此值 -->
</result>
</action>
</package>
</struts>
Action层下的 AjaxLoginAction 类
package com.shore.ajax.ation; import java.util.HashMap;
import java.util.Map; import net.sf.json.JSONObject; import com.opensymphony.xwork2.ActionSupport; /**
* @author DSHORE/2019-8-1
*
*/
public class AjaxLoginAction extends ActionSupport {
// 用户Ajax返回数据
private String outinfo; //输出信息 // struts的属性驱动模式，自动填充页面的属性到这里 （注入）
private String loginName;
private String password; @Override
public String execute() {
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();
// 为map添加一条数据，记录一下页面传过来loginName
map.put("name", this.loginName);
map.put("pwd", this.password);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map); // 调用json对象的toString方法转换为字符串然后赋值给outInfo
this.outinfo = jo.toString();
//测试一下outInfo的结果
System.out.println(this.outinfo); return SUCCESS;
} public String getOutinfo() {
return outinfo;
}
public void setOutinfo(String outinfo) {
this.outinfo = outinfo;
} public String getLoginName() {
return loginName;
}
public void setLoginName(String loginName) {
this.loginName = loginName;
} public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
web.xml 配置文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list> <filter>
<filter-name>struts2</filter-name>
<filter-class>
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
</filter-class>
</filter> <filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
实例效果图
Java基础96 ajax技术的使用（servlet）
|
原创作者：DSHORE 作者主页：http://www.cnblogs.com/dshore123/ 原文出自：https://www.cnblogs.com/dshore123/p/11284860.html 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |