ajax+struts2+JQuery+json实现异步刷新

xiaoxiao2021-02-28  108

现在分享一下ajax+struts+JQuery+json的异步刷新实现方法 首先导入jar包 struts2的json-lib,struts2-json-plugin包 我用的是maven,pom.xml是这样配置的:

<!-- struts2依赖包 --> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-core</artifactId> <version>2.3.14</version> </dependency> <!-- json包 --> <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</artifactId> <version>2.4</version> <!-- 这个jar包需要指定jdk1.5,不影响你用的是jdk --> <classifier>jdk15</classifier> </dependency> <dependency> <groupId>org.apache.struts</groupId> <artifactId>struts2-json-plugin</artifactId> <version>2.3.7</version> </dependency>

然后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"> <title>Insert title here</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function() { $("#ajaxA").click(function() { var obj = $('#rate').prop("value"); $.ajax({ type : 'post',//请求方式 url : 'text_notest',//请求路径 data : {//传给action的参数,rate在action中必须有get,set方法 rate : obj }, dataType : 'json',//以json格式封装数据 //无异常时执行的方法 success : function(message) { //将返回数据转化为数组 var d = eval("("+message+")"); $("#mydiv").html(" rate="+d.rate+" <br>data:"+message); }, //出现异常时执行的方法 error : function(data) { $("#mydiv").html("出现异常"); } }); }); }); </script> </head> <body> <input type="text" id="rate" /> <button id="ajaxA">ajxa刷新</button> <div id="mydiv"></div> </body> </html>

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> <!-- 必须继承 json-default --> <package name="default" extends="struts-default,json-default" namespace="/" > <!-- jquery,json方式 ,以通配符方式访问方法 --> <action name="text_*" method="{1}" class="com.zjg. ajaxstudy.TextAction"> <result type="json"> <!--是否去掉null值,默认为false--> <param name="excludeNullProperties">true</param> <!--返回的json数据的根为root中指定的bean类,例如此处为 message,如果没有指定root属性,则默认使用Action作为返回的 json数据的根 --> <param name="root">message</param> </result> </action> </package> </struts>

action中代码:

import java.util.HashMap; import java.util.Map; import com.opensymphony.xwork2.ActionSupport; import net.sf.json.JSONObject; public class TextAction extends ActionSupport { private String rate; private String message; public String notest() throws IOException { try { /* 将数据存储在map里,再转换成json类型数据,也可以自己手动构造 * json类型数据 */ Map<String, Object> map = new HashMap<String, Object>(); map.put("name", "张三"); map.put("rate", rate); map.put("age", "12"); // 将map对象转换成json类型数据 JSONObject json = JSONObject.fromObject(map); message = json.toString();//给result赋值,传递给页面 } catch (Exception e) { e.printStackTrace(); } return SUCCESS; } public String getRate() { return rate; } public void setRate(String rate) { this.rate = rate; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } }

运行效果:

ok,ajax+struts2+JQuery+json的实现就到这里了,有什么问题欢迎留言

转载请注明原文地址: https://www.6miu.com/read-43986.html

最新回复(0)