0

0

html5怎么访问struts_html5用Ajax请求Struts后端接口获取数据【访问】

看不見的法師

看不見的法師

发布时间:2025-12-24 11:23:02

|

270人浏览过

|

来源于php中文网

原创

Ajax请求Struts接口失败的常见原因包括路径错误、Action未配置、返回格式不匹配或跨域限制;可行方法有:一、原生XMLHttpRequest同步GET;二、fetch异步POST传JSON;三、jQuery.ajax GET处理JSON;四、表单隐藏提交配合Struts Token;五、FormData上传文件并传参。

html5怎么访问struts_html5用ajax请求struts后端接口获取数据【访问】

如果您在HTML5页面中使用Ajax请求Struts后端接口但无法成功获取数据,则可能是由于请求路径错误、Action未正确配置、返回格式不匹配或跨域限制导致。以下是实现该访问的多种可行方法:

一、使用原生XMLHttpRequest发送同步GET请求

该方法适用于简单场景,不依赖外部库,直接通过浏览器内置对象发起请求,确保URL路径与Struts配置的Action映射一致,并手动处理响应文本。

1、确认Struts配置文件中已定义对应Action,例如/json/data.json

2、在HTML5页面中声明XMLHttpRequest实例:var xhr = new XMLHttpRequest();

立即学习前端免费学习笔记(深入)”;

3、调用open方法设置请求方式和URL,URL需包含.action后缀,例如:xhr.open('GET', 'getData.action', false);

4、设置请求头以支持JSON响应:xhr.setRequestHeader('Accept', 'application/json');

5、调用send方法发送请求:xhr.send();

6、检查响应状态并解析响应体:if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); }

二、使用fetch API发送异步POST请求并提交JSON参数

该方法利用现代浏览器支持的fetch标准,支持Promise链式调用,适合向Struts Action传递结构化参数,需确保Action配置了param interceptor并启用JSON参数解析。

1、构造要提交的JSON数据对象:const payload = { userId: '1001', token: 'abc2024' };

2、调用fetch函数,指定URL为Struts Action路径:fetch('submitForm.action', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });

3、使用then链处理响应:.then(response => response.json())

4、在后续then中接收解析后的JavaBean或Map结构返回值:.then(data => console.log(data.name, data.status));

5、添加catch捕获网络或解析异常:.catch(err => console.error('请求失败:', err));

三、使用jQuery.ajax封装GET请求并处理Struts返回的JSON结果

该方法适用于已引入jQuery库的项目,可简化跨浏览器兼容性处理,要求Struts Action返回Content-Type为application/json的响应体,并禁用默认的contentType转换。

1、确认页面已加载jQuery库,版本不低于1.10.0。

LangChain
LangChain

一个开源框架,用于构建基于大型语言模型(LLM)的应用程序。

下载

2、编写ajax调用代码,URL指向Struts Action路径:$.ajax({ url: 'listUsers.action', type: 'GET', dataType: 'json', cache: false });

3、在success回调中处理返回的List序列化结果:success: function(data) { $.each(data, function(i, user) { console.log(user.id + ': ' + user.username); }); }

4、在error回调中判断HTTP状态码是否为404或500:error: function(xhr) { if (xhr.status === 404) alert('Action未找到'); }

5、设置traditional为true避免数组参数被自动编码traditional: true

四、通过表单隐藏提交配合Struts Token机制完成安全访问

该方法适用于需要防重复提交的业务场景,利用Struts内置的token拦截器验证请求合法性,前端通过动态创建form表单模拟POST提交,绕过Ajax跨域限制(同源前提下)。

1、在HTML中预留一个空div用于注入表单:

2、构建包含token字段的隐藏表单HTML字符串:var formHtml = '

';

3、将表单插入容器并提交:document.getElementById("tempFormContainer").innerHTML = formHtml; document.getElementById("tokenForm").submit();

4、确保Struts.xml中该Action已配置token拦截器引用:

5、后端Action继承TokenAware接口并在execute中判断isTokenValid()返回值。

五、使用FormData对象上传文件并携带其他参数访问Struts FileUpload Action

该方法适用于需要同时提交文件与文本字段的场景,依赖Struts2的fileUpload拦截器,前端必须设置正确的enctype类型且禁用默认的JSON序列化。

1、获取文件输入元素并创建FormData实例:const fileInput = document.getElementById('uploadFile'); const formData = new FormData();

2、追加文件字段,字段名需与Action中定义的file属性名一致:formData.append('upload', fileInput.files[0]);

3、追加普通文本参数,如用户ID:formData.append('userId', 'U9987');

4、调用fetch发起multipart/form-data请求:fetch('uploadImage.action', { method: 'POST', body: formData });

5、确保Struts Action中定义了类型为File的属性及对应的setter方法,并配置

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

400

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

528

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

305

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

67

2025.09.10

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

495

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

414

2024.03.06

jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

148

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

305

2023.10.13

苹果官网入口直接访问
苹果官网入口直接访问

苹果官网直接访问入口是https://www.apple.com/cn/,该页面具备0.8秒首屏渲染、HTTP/3与Brotli加速、WebP+AVIF双格式图片、免登录浏览全参数等特性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

10

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML5/CSS3/JavaScript/ES6入门课程
HTML5/CSS3/JavaScript/ES6入门课程

共102课时 | 6.5万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.1万人学习

前端开发(基础+实战项目合集)
前端开发(基础+实战项目合集)

共60课时 | 3.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号