首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

struts2 js提交表单

Struts2 是一个流行的 Java Web 应用框架,它简化了开发过程并提高了应用程序的可维护性。在 Struts2 中,使用 JavaScript 提交表单是一种常见的做法,它可以提供更好的用户体验和更灵活的前端交互。

基础概念

Struts2: 是一个基于 MVC 设计模式的 Java Web 应用框架,它通过拦截器处理 HTTP 请求,并将请求分发到相应的 Action 类进行处理。

JavaScript: 是一种脚本语言,常用于网页上的交互操作,包括表单提交、动态内容更新等。

优势

  1. 用户体验: 使用 JavaScript 可以实现异步表单提交,用户无需刷新整个页面即可看到提交结果。
  2. 性能: 减少了不必要的页面刷新,提高了应用的响应速度。
  3. 灵活性: 可以在前端进行一些简单的验证和处理,减轻服务器负担。

类型

  • 同步提交: 表单提交后会等待服务器响应,期间页面不可交互。
  • 异步提交: 使用 AJAX 技术,表单提交后页面无需等待即可继续交互。

应用场景

  • 实时搜索: 用户输入关键词后立即显示搜索结果。
  • 表单验证: 在提交前使用 JavaScript 进行客户端验证。
  • 动态内容更新: 根据用户操作动态加载或更新页面内容。

示例代码

以下是一个简单的 Struts2 表单提交示例,结合了 JavaScript 实现异步提交:

HTML 表单

代码语言:txt
复制
<form id="myForm" action="submitForm.action" method="post">
    <input type="text" name="username" id="username" placeholder="Username">
    <input type="password" name="password" id="password" placeholder="Password">
    <button type="button" onclick="submitForm()">Submit</button>
</form>
<div id="result"></div>

JavaScript 代码

代码语言:txt
复制
function submitForm() {
    var form = document.getElementById('myForm');
    var formData = new FormData(form);

    fetch('submitForm.action', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('result').innerText = data.message;
    })
    .catch(error => console.error('Error:', error));
}

Struts2 Action 类

代码语言:txt
复制
public class SubmitFormAction extends ActionSupport {
    private String username;
    private String password;

    // Getters and Setters

    public String execute() {
        // 处理表单数据
        return SUCCESS;
    }
}

遇到的问题及解决方法

问题: 表单提交后没有任何响应。

原因: 可能是 JavaScript 代码中的错误,或者是服务器端处理逻辑有问题。

解决方法:

  1. 检查 JavaScript 控制台: 查看是否有错误信息。
  2. 验证服务器端: 确保 Action 类正确处理请求并返回预期的响应。
  3. 网络请求检查: 使用浏览器的开发者工具查看网络请求是否成功发送及响应内容。

通过以上步骤,通常可以定位并解决表单提交无响应的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

异步提交表单_js异步提交表单并回调

异步提交表单 异步提交表单的步骤 所谓异步提交表单,就是不再使用表单的提交按钮实现表单的提交功能,而是通过Ajax异步交互方式实现表单提交。具体实现步骤如下: 获取表单及所有表单组件对应的数据值。...将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。 通过Ajax异步交互方式提交表单。...info, success: function(data){ console.log(data); } }); Jetbrains全家桶1年46,售后保障稳定 异步提交表单的案例...= $("#password"); $form.bind("submit", function (event) { // 阻止表单默认的同步提交 event.preventDefault(); /.../ 表单序列化 - 根据表单默认同步提交获取数据的方式 // var data = $("form").serialize(); // console.log(data); var data = $("

11.8K10
  • firefox中用js提交表单

    表单提交在 firefox 浏览器下是不起作用的 2....用.submit () 方法提交表单 3).button 的 name/id 绝对不能命名为”submit” 4).form 中所有的组件(按钮,文本框等)的 name/id 也不能命名为”submit...” # 当提交按钮的 name 或者 id 为 submit 时候,用 js 提交表单,表单名.submit () 时候会报一个错误,提示对象不支持此属性或办法。...那么,请问为什么 当提交按钮的 name 或者 id 为 submit 或者 action 的时候 js 提交表单会报错呢?这难道是 一个 bug? 高手们请指教。。。。...我在项目中发现 与 得出的效果截然不同, 谁能告诉我这两着有合不同 我又如何能用图片来替代原有的提交按钮 是说这是一个按钮,它的是一个提交按钮。当点击它时,它会自动将它所在的表单进行提交.

    7.2K20

    表单提交原理_防止表单重复提交

    1.HTTP是如何提交表单的 标签的属性enctype设置以何种编码方式提交表单数据。...它只处理表单域里的value属性值,采用这种变法方式的表单会将表单域的值处理成URL方式。...2.文件标签 标签用来提交文件。要注意的是,这个标签的value值并不是所选择的文件内容,而是这个文件的完整路径名。...正如前面所说的,表单在提交表单时,如果采用默认编码方式,文件的内容是不会被提交的。要提交文件内容要采用multipart/form-data编码方式,这需要在服务器端从提交的二进制流中读取文件内容。...Content-Disposition: form-data; name=”buttom” 上传 ——WebKitFormBoundaryQqpAxgR2Pgik6uyY– 可以看到提交的表单数据是混合了所有请求参数的数据

    5.5K20

    Struts2(二)---将页面表单中的数据提交给Action

    转载请注明:http://blog.csdn.net/uniquewonderq 问题:在struts2框架下,如何将表单数据传递给业务控制器Action。...struts2中,表单想Action传递参数的方式有两种,并且这两种传参方式都是struts2默认实现的,他们分别是基本属性注入、域模型注入、其中 ---基本属性注入,是将表单的数据项分别传入给Action...---域模型注入,是将表单的数据项打包传入给Action中的一个实体对象。 我们继续使用项目Struts2的hello Struts实例,在其基础上使用这2中方式完成页面向Action的参数传递。...具体的我们可以在项目首页index.jsp上追加表单,并在表单中模拟一些数据,将这些数据提交给HelloAction,最后在HelloAction中将接受的参数输出到控制台。...具体实现步骤: 1>基本属性注入 步骤一: 在Struts2Day01项目的index.jsp中,追加表单,并将该表单设置提交给HelloAction,即将form的action属性设置为:“/Struts2Day01

    63810

    node表单提交POST提交

    前几天给大家介绍了使用node的提交(get)获取到表单提交的内容,get提交的参数查询部分(query)可以获得到,由于get提交的内容在url显示,而post提交处理机制,为了保障安全性不显示在url...中,下面案例介绍下post提交案例!...node代码(app.js) const http=require('http'); //查询模块 const querystring=require("querystring"); const server...防止一个过大的表单阻塞了整个进程         req.addListener("data",function(chunk){            //每次传入一段chunk(数据,一次无法传输完毕...;         }) 首先,要监听addListener(nodejs独特方法,非js的),data参数固定,一个回调函数参数传入chunk,每次post请求数据就是chunk一次,然后将新的chunk

    4.4K40

    html表单提交

    html表单提交,哪些标签的哪些值会被提交给服务器呢? 1、只能为input、textarea、select三类类型的标签。...当input=submit的时候,只有被点击的按钮的value才会被提交; 2、input标签有title、type、disabled、value等属性,但只有value属性的值才会提交到服务器,其他属性都是供显示用的...如果要将标签的value属性值提交到服务器,则必须为标签设定name属性,提交到服务器的时候将会以“name=value"的键值对的方式提交到服务器。name是给服务器用的,id是给Dom用的。...对于RadioButton,同name的为一组,选中的RadioButton的value被提交到服务器; 4、要提交的标签必须放到form标签内。...只有放到form标签内的标签才可能会被提交到服务器,form之外的input标签会被忽略掉。

    5.4K30

    java表单提交方法_表单提交的几种方式

    通用提交按钮–> 2、 提交 3、 说明:用户提交按钮或图像按钮时,就会提交表单。...4、阻止表单提交 只要在表单中存在上面列出的任何一种按钮,那么相应表单控件拥有焦点的情况下,按回车键就可以提交表单。如果表单里没有提交按钮,按回车键不会提交表单。...以这种方式提交表单时,浏览器会在将请求发送给服务器之前触发submit事件。这样,我们就有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。...这种方式无需表单包含提交按钮,任何时候都可以正常提交表单。...提交表单时可能出现的最大问题,就是重复提交表单。在第一次提交表单后,如果长时间没有反映,用户可能会变得不耐烦。这时候,他们也许会反复单击提交按钮。

    5K40

    Struts2 表单和非表单标签

    学习内容 Struts 2表单标签 Struts 2非表单标签 能力目标 熟练使用Struts 2表单标签开发表单 熟练使用Struts 2非表单标签 本章简介 上一章讲述了ognl和Struts2...本章将重点介绍Struts2标签库中的表单标签和非表单标签。 表单标签主要用于生成HTML中的表单。 非表单标签主要包含一些常用的功能标签,例如显示日期或树形菜单。...熟练使用Struts2标签将大大简化视图页面的代码编辑工作,提高视图页面的维护效率。 ​核心技能部分​ 7.1 表单标签 Struts的表单标签,可分为两种:form标签本身和单个表单元素的标签。...当提交该表单时,两个标签的请求参数都会被提交。 因为该标签会生成两个下拉列表框,因此需要分别指定两个下拉列表框中的集合、Label等属性,下面是该标签常用的属性。...图7.1.7 optiontransferselect标签 8. ​token标签​ 标签用于避免刷新页面时多次提交表单,通过借助于TokenInterceptor拦截器来实现阻止页面重复提交

    8210
    领券