Struts2整合Ajax在JSP页面无法展示JSON数据求助

嘿，我看你碰到的问题是JSP页面没法展示JSON数据，但浏览器控制台里明明能看到JSON内容对吧？结合你给出的Struts配置，我来帮你一步步搞定这个事儿。

第一步：修正Struts配置 #

从你当前的配置来看，你的action返回SUCCESS时是跳转到/schedule.jsp页面，但你需要的是直接返回JSON数据给前端，所以得把result类型改成json（这要感谢json-default包提供的支持）。修改后的配置如下：

<struts>
    <constant name="struts.devMode" value="true" />
    <package name="default" extends="json-default" namespace="/">
        <action name="getCronDetails" class="myaction">
            <!-- 把result类型改为json，指定要返回的根对象（和你action类里的属性名一致） -->
            <result name="SUCCESS" type="json">
                <param name="root">cronDetails</param>
            </result>
        </action>
    </package>
</struts>

这里要注意：root参数的值必须和你myaction类里存储数据的属性名完全一致，比如你在action里定义了private List<Cron> cronDetails;，并且有对应的getCronDetails()方法，这样Struts才能自动把这个属性序列化成JSON返回给前端。

第二步：JSP页面的Ajax代码（用jQuery实现） #

接下来在你的schedule.jsp里写Ajax请求，拿到JSON数据后渲染到页面上。我用jQuery来实现，因为它处理Ajax逻辑更简洁直观：

<!-- 先引入jQuery（可以用本地文件，也可以用CDN） -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
$(document).ready(function() {
    // 页面加载完成后自动发起Ajax请求
    $.ajax({
        url: "${pageContext.request.contextPath}/getCronDetails", // 对应你的action名称，加上项目上下文路径避免路径问题
        type: "GET", // 如果你的action用POST方法，这里改成POST即可
        dataType: "json", // 告诉jQuery预期返回的是JSON格式数据
        success: function(data) {
            // 请求成功后，遍历JSON数据拼接HTML
            let renderHtml = "";
            // 假设返回的data是一个数组，根据你的实际JSON结构调整字段
            $.each(data, function(index, cronItem) {
                renderHtml += `
                    <div class="cron-card">
                        <h3>任务ID: ${cronItem.id}</h3>
                        <p>Cron表达式: ${cronItem.cronExpr}</p>
                        <p>任务描述: ${cronItem.desc}</p>
                    </div>
                `;
            });
            // 把拼接好的HTML插入到页面的容器中
            $("#cronDataContainer").html(renderHtml);
        },
        error: function(xhr, status, err) {
            // 请求失败时的提示
            console.error("加载数据出错: ", err);
            $("#cronDataContainer").html("数据加载失败，请稍后重试");
        }
    });
});
</script>

<!-- 页面上用来展示JSON数据的容器 -->
<div id="cronDataContainer"></div>

关键说明： #

• 确保你的action类里的属性有对应的getter方法，Struts需要通过getter来获取数据进行序列化
• Ajax请求的url一定要加上项目上下文路径（${pageContext.request.contextPath}），避免部署后出现路径错误
• 渲染HTML的部分要完全匹配你的JSON结构，比如cronItem.id、cronItem.cronExpr这些字段要和你返回的JSON字段一致
• 如果需要给action传递参数，可以在Ajax的data属性里添加，比如data: {taskId: 1001}

这样调整后，你的JSP页面应该就能正常展示JSON数据了。如果还是有问题，可以检查浏览器控制台的Network标签，看看请求的响应是否正确，或者action类里的属性是否正确配置了getter方法。

内容的提问来源于stack exchange，提问作者Ashok bhor