利用artDialog.js实现Ajax跨页面表单提交与页面刷新

本文档主要介绍了如何使用Ajax技术实现跨页面提交表单，解决重复提交问题的一种方法。在处理表单验证、token口令校验以及重定向之外，文章重点讨论了通过创建一个新的页面来接收表单数据，表单提交后关闭当前页面并刷新父页面的流程。这里以Struts框架和JavaScript库artDialog.js为例进行讲解。 首先，我们来看文件结构。整个项目可能包括以下几个部分： 1. **Struts配置**： - 文档中使用了Struts标签库（`<s:taglib>`），这表明项目采用了Struts框架进行MVC（Model-View-Controller）设计，用于简化Java Web开发，特别是表单处理。 2. **JSP页面**： - `user.jsp`是用户界面的展示页，其中包含了表单元素，如链接和按钮，用于触发Ajax请求。页面引用了jQuery库（`<script src="/MySSH2/jquery-1.7.js"></script>`）和artDialog.js库（`<script src="/MySSH2/artDialog.js?skin=default"></script>`），这些是实现异步交互的重要脚本。 - `openA()` JavaScript函数定义了一个事件监听器，当点击相应的链接时，会调用`window.open()`方法打开新的页面`/MySSH2/user/manage_addUI`，这是表单提交的接收端。 3. **Ajax交互**： - 在页面上，有两个链接分别指向不同的操作：一个是标准的服务器端跳转，另一个是通过JavaScript触发的Ajax请求。通过`onclick="openA()"`，当用户点击该链接时，不会刷新整个页面，而是通过Ajax发送异步请求到`manage_addUI`页面。 - 由于Ajax表单提交，用户可以在不离开当前页面的情况下提交数据，提高了用户体验，同时减少了重复提交的风险。 4. **安全性考虑**： - 文档中提到的"token口令校验"可能是用来防止CSRF（Cross-Site Request Forgery）攻击的一种措施，通过在前后端传递一个随机生成的token，确保请求的真实性和合法性。 总结来说，这篇文章主要讲解了如何利用Ajax技术在Struts框架下创建一个动态的表单提交场景，通过新页面的加载和关闭，实现了无刷新提交，结合artDialog.js库提供了更便捷的用户交互体验。同时，还涉及到了一些基本的安全性措施，如防止重复提交和CSRF攻击。这对于理解和实践前端与后端的交互方式，尤其是对于Struts框架开发者来说，具有很高的实用价值。