关键词

ajax+json+Struts2实现list传递实例讲解

这里是通过使用Ajax技术结合JSON和Struts2框架实现列表数据传递的攻略。以下是实现步骤:

第一步:创建Action类

首先,我们需要创建一个名为“ListAction”的Action类。该Action类将负责从数据库中获取列表数据并把它们封装为一个List对象,最后再将这个List对象转换为JSON格式返回给前端页面。

以下是一个简单示例:

public class ListAction extends ActionSupport {
    private List<String> dataList; // 用于存储从数据库中获取的数据

    public String execute() {
        // 获取数据并存储到dataList中
        dataList = new ArrayList<String>();
        dataList.add("data1");
        dataList.add("data2");
        dataList.add("data3");
        // 将dataList转换为JSON格式
        Gson gson = new Gson();
        String json = gson.toJson(dataList);
        // 将JSON格式数据返回给前端页面
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("UTF-8");
        try {
            PrintWriter out = response.getWriter();
            out.print(json);
            out.flush();
            out.close();
        } catch (IOException e) {
            e.printStackTrace();
            return ERROR;
        }
        return null;
    }

    public List<String> getDataList() {
        return dataList;
    }
}

第二步:创建JSP页面

然后,我们需要在JSP页面中通过Ajax技术获取到后台返回的JSON格式数据,并将其转换为JS对象,最后利用JavaScript将数据呈现在页面上。

以下是一个简单示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>List Example</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // 点击按钮触发Ajax请求
            $("#btn").click(function () {
                $.ajax({
                    url: '${pageContext.request.contextPath}/list.action',  // 访问Action类的地址
                    type: 'GET',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        // 将JSON格式转换为JS对象
                        var obj = JSON.parse(data);
                        // 循环取出数据并添加到页面ul中
                        var ul = document.getElementById("dataList");
                        for (var i = 0; i < obj.length; i++) {
                            var li = document.createElement("li");
                            li.innerHTML = obj[i];
                            ul.appendChild(li);
                        }
                    },
                    error: function () {
                        alert("Error!");
                    }
                });
            });
        });
    </script>
</head>
<body>
<h1>List Example</h1>
<button id="btn">Get List Data</button>
<ul id="dataList"></ul>
</body>
</html>

第三步:配置Struts.xml文件

最后,我们需要在Struts2的配置文件struts.xml中配置Action类的映射关系。以下是一个简单示例:

<struts>
    <package name="default" extends="struts-default">
        <action name="list" class="com.example.ListAction">
            <result name="success"></result>
        </action>
    </package>
</struts>

在这个示例中,我们创建了一个名为“default”的Package,并将ListAction映射到/action/list地址上。我们将通过jQuery库的Ajax功能来访问这个地址,并获取返回的JSON格式数据。

至此,我们通过使用Ajax技术结合JSON和Struts2框架实现了列表数据传递的工作。

以上是一个简单的示例,您可以根据具体需求进行更改和调整。

本文链接:http://task.lmcjl.com/news/8117.html

展开阅读全文