Struts 2与AJAX集成:正确处理JSON响应的教程

Struts 2与AJAX集成:正确处理JSON响应的教程

本教程旨在解决Struts 2在使用AJAX返回JSON数据时常见的解析错误问题。当手动将JSON字符串写入响应流时,Struts 2的JSON插件会因无法找到可序列化的Action属性而导致客户端接收到无效响应。文章将详细阐述如何通过在Action中定义带有Getter方法的属性,并利用Struts 2 JSON插件的自动序列化机制,实现高效、正确的JSON数据交互。

Struts 2 AJAX JSON响应常见问题分析

在web开发中,struts 2与ajax结合进行异步数据交互是常见的模式。然而,开发者在使用struts 2返回json数据给前端ajax请求时,常会遇到一个棘手的问题:客户端ajax请求进入error回调函数,并报告json解析错误(parse error)。这通常发生在开发者尝试在struts 2 action中手动构建json对象并将其直接写入http响应流时,例如使用servletactioncontext.getresponse().getwriter().write(obj.tojsonstring())。

这种做法与Struts 2 JSON插件的工作机制相冲突。当struts.xml中配置了时,Struts 2的JSON插件会尝试自动序列化Action实例中的JavaBean属性,而不是简单地传递已经写入响应流的数据。手动写入会导致以下问题:

输出冲突: JSON插件在处理json结果类型时,会尝试再次写入响应流。如果Action中已经手动写入了内容,就会导致响应内容重复、格式错误,或者因为响应流已被关闭而抛出异常。格式不符: 即使没有冲突,JSON插件也可能在手动写入的内容前后添加额外的字符或修改HTTP头,导致最终响应不再是纯净、有效的JSON格式,从而引发客户端的解析错误。

Struts 2 JSON插件工作原理

Struts 2的JSON插件(struts2-json-plugin)提供了一种声明式的方式来处理JSON数据。它的核心思想是:将Action类中的JavaBean属性(带有公共getter方法的字段)自动序列化为JSON格式,并将其作为HTTP响应返回给客户端。

要启用此功能,需要进行以下配置:

在struts.xml中,对应的package需要继承json-default。Action的result类型需要设置为json。

插件会扫描Action实例,查找所有带有getter方法的属性,并将它们转换为JSON键值对。例如,如果Action有一个名为data的Map属性,并提供了getData()方法,那么data的内容就会被序列化。

正确处理JSON响应的实践

为了避免上述问题,我们应该遵循Struts 2 JSON插件的设计理念,通过Action属性来传递JSON数据。

1. Action类改造

不再手动将JSON字符串写入响应流,而是将需要返回的数据封装到一个Action属性中,并为其提供公共的getter方法。

原始(错误)的Action类示例:

import java.io.IOException;import org.apache.struts2.ServletActionContext;import org.json.simple.JSONObject; // 注意这里使用了org.json.simple.JSONObjectimport com.opensymphony.xwork2.ActionSupport;public class PropertyTesting extends ActionSupport {    public String execute() {        JSONObject obj  = new JSONObject();        obj.put("Name", "PersonName");        obj.put("ID", "PersonID");        try {            // 错误做法:手动写入响应流            ServletActionContext.getResponse().getWriter().write(obj.toJSONString());        } catch (IOException e) {            e.printStackTrace();        }        return SUCCESS;    }}

修正后的Action类示例:

Find JSON Path Online Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

Find JSON Path Online 30 查看详情 Find JSON Path Online

import java.util.HashMap;import java.util.Map;import com.opensymphony.xwork2.ActionSupport;public class PropertyTesting extends ActionSupport {    // 声明一个属性来承载需要返回的JSON数据    // 可以是Map、List、自定义JavaBean或其他可序列化的对象    private Map jsonResponseData;    // 必须提供该属性的公共getter方法,这是JSON插件进行序列化的关键    public Map getJsonResponseData() {        return jsonResponseData;    }    public String execute() {        jsonResponseData = new HashMap(); // 初始化数据容器        jsonResponseData.put("Name", "PersonName");        jsonResponseData.put("ID", "PersonID");        // 无需手动写入响应流,JSON插件会自动检测getJsonResponseData()方法并序列化其返回值        return SUCCESS; // 返回SUCCESS,让Struts 2处理结果    }}

在修正后的Action中,我们移除了手动写入响应流的代码。取而代之的是,我们声明了一个Map类型的jsonResponseData属性,并为其提供了getJsonResponseData()方法。在execute方法中,我们填充这个Map。当Action返回SUCCESS时,Struts 2的JSON插件会自动调用getJsonResponseData()方法,获取到Map对象,并将其序列化为JSON字符串作为HTTP响应返回。

2. Struts.xml配置

确保你的struts.xml配置正确地使用了JSON插件。

                                       

这里,extends=”json-default”引入了JSON插件提供的所有默认拦截器和结果类型。则明确指示Struts 2使用JSON插件来处理此Action的响应。

3. 前端AJAX调用

前端的AJAX代码保持不变,但现在它将能够正确地接收和解析JSON响应。

Property Testingfunction invokeAjax(){    $.ajax(    {        type:"POST",        url:"PropertyTesting",        dataType:"json", // 告知jQuery期望JSON响应        success: function(responseData) // 成功回调函数,responseData将是解析后的JSON对象        {            console.log("Success:", responseData);            console.log("Name:", responseData.jsonResponseData.Name); // 访问数据            console.log("ID:", responseData.jsonResponseData.ID);        },        error: function(jqXHR, textStatus, errorThrown) // 错误回调函数        {            console.log("Error Status:", textStatus);            console.log("Error Thrown:", errorThrown);            console.log("Error Response:", jqXHR.responseText);        }    });}    

在success回调中,responseData将直接是JavaScript对象,你可以通过点语法(responseData.jsonResponseData.Name)来访问其属性。注意,默认情况下,JSON插件会将Action属性名(例如jsonResponseData)作为JSON的根键。

注意事项与最佳实践

Action属性命名与JSON字段名: 默认情况下,JSON插件会将Action属性名作为JSON的根键。如果希望直接返回Map或对象的内部内容作为JSON的根对象(即不包含jsonResponseData这个键),可以在struts.xml的result标签中添加root参数:

    jsonResponseData

这样,前端接收到的JSON将直接是{“Name”:”PersonName”, “ID”:”PersonID”},而不是{“jsonResponseData”:{“Name”:”PersonName”, “ID”:”PersonID”}}。

Action的非单例特性: Struts 2的Action是请求作用域的,每次HTTP请求都会创建一个新的Action实例。这意味着你可以在Action中安全地定义实例变量(属性)来存储请求相关的数据,而不必担心线程安全问题。依赖管理: 确保你的项目中已正确引入struts2-json-plugin及其所有必要的依赖。通常,Maven或Gradle会自动处理传递性依赖。错误处理: 在前端AJAX的error回调中,jqXHR.responseText可以帮助你查看服务器返回的原始响应,这对于调试JSON解析错误非常有帮助。

总结

正确地在Struts 2中使用AJAX返回JSON数据,关键在于理解并遵循Struts 2 JSON插件的工作机制。避免在Action中手动写入响应流,而是通过定义带有公共getter方法的Action属性来承载需要返回的数据。结合正确的struts.xml配置(继承json-default和设置result type=”json”),Struts 2将自动完成JSON序列化,确保前端AJAX请求能够顺利接收并解析有效的JSON响应。遵循这些最佳实践,可以有效提升开发效率并避免常见的JSON解析问题。

以上就是Struts 2与AJAX集成:正确处理JSON响应的教程的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/215780.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月3日 14:48:46
下一篇 2025年11月3日 14:49:23

相关推荐

  • 如何直接访问 Sass 地图变量的值?

    直接访问 sass 地图变量的值 在 sass 中,我们可以使用地图变量来存储一组键值对。而有时候,我们可能需要直接访问其中的某个值。 可以通过 map-get 函数直接从地图中获取特定的值。语法如下: map-get($map, $key) 其中: $map 是我们要获取值的 sass 地图变量。…

    2025年12月24日
    000
  • 如何使用 Ant Design 实现自定义的 UI 设计?

    如何使用 Ant Design 呈现特定的 UI 设计? 一位开发者提出: 我希望使用 Ant Design 实现如下图所示的 UI。作为一个前端新手,我不知从何下手。我尝试使用 a-statistic,但没有任何效果。 为此,提出了一种解决方案: 可以使用一个图表库,例如 echarts.apac…

    2025年12月24日
    000
  • 您不需要 CSS 预处理器

    原生 css 在最近几个月/几年里取得了长足的进步。在这篇文章中,我将回顾人们使用 sass、less 和 stylus 等 css 预处理器的主要原因,并向您展示如何使用原生 css 完成这些相同的事情。 分隔文件 分离文件是人们使用预处理器的主要原因之一。尽管您已经能够将另一个文件导入到 css…

    2025年12月24日
    000
  • Antdv 如何实现类似 Echarts 图表的效果?

    如何使用 antdv 实现图示效果? 一位前端新手咨询如何使用 antdv 实现如图所示的图示: antdv 怎么实现如图所示?前端小白不知道怎么下手,尝试用了 a-statistic,但没有任何东西出来,也不知道为什么。 针对此问题,回答者提供了解决方案: 可以使用图表库 echarts 实现类似…

    2025年12月24日
    300
  • 如何使用 antdv 创建图表?

    使用 antdv 绘制如所示图表的解决方案 一位初学前端开发的开发者遇到了困难,试图使用 antdv 创建一个特定图表,却遇到了障碍。 问题: 如何使用 antdv 实现如图所示的图表?尝试了 a-statistic 组件,但没有任何效果。 解答: 虽然 a-statistic 组件不能用于创建此类…

    2025年12月24日
    200
  • 如何在 Ant Design Vue 中使用 ECharts 创建一个类似于给定图像的圆形图表?

    如何在 ant design vue 中实现圆形图表? 问题中想要实现类似于给定图像的圆形图表。这位新手尝试了 a-statistic 组件但没有任何效果。 为了实现这样的图表,可以使用 [apache echarts](https://echarts.apache.org/) 库或其他第三方图表库…

    好文分享 2025年12月24日
    100
  • React 嵌套组件中,CSS 样式会互相影响吗?

    react 嵌套组件 css 穿透影响 在 react 中,嵌套组件的 css 样式是否会相互影响,取决于采用的 css 解决方案。 传统 css 如果使用传统的 css,在嵌套组件中定义的样式可能会穿透影响到父组件。例如,在给出的代码中: 立即学习“前端免费学习笔记(深入)”; component…

    2025年12月24日
    000
  • React 嵌套组件中父组件 CSS 修饰会影响子组件样式吗?

    对嵌套组件的 CSS 修饰是否影响子组件样式 提问: 在 React 中,如果对嵌套组件 ComponentA 配置 CSS 修饰,是否会影响到其子组件 ComponentB 的样式?ComponentA 是由 HTML 元素(如 div)组成的。 回答: 立即学习“前端免费学习笔记(深入)”; 在…

    2025年12月24日
    000
  • echarts地图中点击图例后颜色变化的原因和修改方法是什么?

    图例颜色变化解析:echarts地图的可视化配置 在使用echarts地图时,点击图例会触发地图颜色的改变。然而,选项中并没有明确的配置项来指定此颜色。那么,这个颜色是如何产生的,又如何对其进行修改呢? 颜色来源:可视化映射 echarts中有一个名为可视化映射(visualmap)的对象,它负责将…

    2025年12月24日
    000
  • 在 React 项目中实现 CSS 模块

    react 中的 css 模块是一种通过自动生成唯一的类名来确定 css 范围的方法。这可以防止大型应用程序中的类名冲突并允许模块化样式。以下是在 react 项目中使用 css 模块的方法: 1. 设置 默认情况下,react 支持 css 模块。你只需要用扩展名 .module.css 命名你的…

    2025年12月24日
    000
  • 我如何编写 CSS 选择器

    CSS 方法有很多,但我都讨厌它们。有些多(顺风等),有些少(BEM、OOCSS 等)。但归根结底,它们都有缺陷。 当然,人们使用这些方法有充分的理由,并且解决的许多问题我也遇到过。因此,在这篇文章中,我想写下我自己的关于如何保持 CSS 井井有条的指南。 这并不是一个任何人都可以开始使用的完整描述…

    2025年12月24日
    000
  • action在css中的用法

    CSS 中 action 关键字用于定义鼠标悬停或激活元素时的行为,语法:element:action { style-property: value; }。它可以应用于 :hover 和 :active 伪类,用于创建交互效果,如更改元素外观、显示隐藏元素或启动动画。 action 在 CSS 中…

    2025年12月24日
    000
  • css规则的类型有哪些

    CSS 规则包括:通用规则:选择所有元素类型选择器:根据元素类型选择元素类选择器:根据元素的 class 属性选择元素ID 选择器:根据元素的 id 属性选择元素(唯一)后代选择器:选择特定父元素内的元素子选择器:选择作为特定父元素的直接子元素的元素伪类:基于元素的状态或特性选择元素伪元素:创建元素…

    2025年12月24日
    000
  • css网页设计模板怎么用

    通过以下步骤使用 CSS 网页设计模板:选择模板并下载到本地计算机。了解模板结构,包括 index.html(内容)和 style.css(样式)。编辑 index.html 中的内容,替换占位符。在 style.css 中自定义样式,修改字体、颜色和布局。添加自定义功能,如 JavaScript …

    2025年12月24日
    000
  • 为什么前端固定定位会发生移动问题?

    前端固定定位为什么会出现移动现象? 在进行前端开发时,我们经常会使用CSS中的position属性来控制元素的定位。其中,固定定位(position: fixed)是一种常用的定位方式,它可以让元素相对于浏览器窗口进行定位,保持在页面的固定位置不动。 然而,有时候我们会遇到一个问题:在使用固定定位时…

    2025年12月24日
    000
  • 学会从头开始学习CSS,掌握制作基本网页框架的技巧

    从零开始学习CSS,掌握网页基本框架制作技巧 前言: 在现今互联网时代,网页设计和开发是一个非常重要的技能。而学习CSS(层叠样式表)是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局,还可以为用户呈现独特且具有吸引力的页面效果。在本文中,我将为您介绍一些基本的CSS知识,以及一些常用的代…

    2025年12月24日
    200
  • 探究CSS引入第三方框架的作用及价值

    CSS引入第三方框架的作用和意义,需要具体代码示例 随着前端技术的迅猛发展,越来越多的前端工程师开始采用第三方框架来简化开发流程并提高工作效率。在CSS的世界里,也有许多优秀的第三方框架可供选择,如Bootstrap、Foundation等。本文将重点讨论CSS引入第三方框架的作用和意义,并通过具体…

    2025年12月24日
    000
  • 从初学到专业:掌握这五种前端CSS框架

    CSS是网站设计中重要的一部分,它控制着网站的外观和布局。前端开发人员为了让页面更加美观和易于使用,通常使用CSS框架。这篇文章将带领您了解这五种前端CSS框架,从入门到精通。 Bootstrap Bootstrap是最受欢迎的CSS框架之一。它由Twitter公司开发,具有可定制的响应式网格系统、…

    2025年12月24日
    200
  • 揭秘Web标准涵盖的语言:了解网页开发必备的语言范围

    在当今数字时代,互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位,网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术,离不开一些必备的语言。本文将揭秘Web标准涵盖的语言,让我们一起了解网页开发所需的语言范围。 首先,HTML(HyperText Markup La…

    2025年12月24日
    000
  • 克服害怕做选择的恐惧症:这五个前端CSS框架将为你解决问题

    选择恐惧症?这五个前端CSS框架能帮你解决问题 近年来,前端开发者已经进入了一个黄金时代。随着互联网的快速发展,人们对于网页设计和用户体验的要求也越来越高。然而,要想快速高效地构建出漂亮的网页并不容易,特别是对于那些可能对CSS编码感到畏惧的人来说。所幸的是,前端开发者们早已为我们准备好了一些CSS…

    2025年12月24日
    200

发表回复

登录后才能评论
关注微信