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

现在分享一下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的实现就到这里了，有什么问题欢迎留言

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

猜你喜欢