如何不使用submit按钮提交HTML表单数据到servlet且不触发页面跳转

解决方案 #

你直接用异步提交就能满足需求，不需要设置form的action属性，也不会触发页面跳转，具体实现步骤如下：

1 先修正现有表单的代码错误 #

你贴的表单里有几个属性写错的问题，先调整避免后续拿数据出错：

• 第二页Pet Type输入框的name属性重复写成了pname，改成ptype
• 第二页Pet Age输入框的name属性错写为Pet name，改成page
• 第二页Next按钮的name属性缺失闭合引号，补上即可

2 前端绑定提交事件 #

你可以给最后一步的提交按钮（或者需要触发提交的next按钮）绑定点击事件，自动收集表单所有字段后异步发给servlet，下面是原生JS实现，不需要额外引入依赖：

// 绑定到你需要触发提交的按钮上，这里以next按钮为例，你也可以加判断到最后一步再执行提交逻辑
document.querySelector('.next.action-button').addEventListener('click', function() {
    // 获取表单DOM
    const form = document.getElementById('msform');
    // 自动序列化表单所有字段数据
    const formData = new FormData(form);
    
    // 发送请求到servlet，把路径替换成你实际配置的servlet映射地址，比如'/saveCustomer'
    fetch('/替换成你的Servlet映射路径', {
        method: 'POST',
        body: formData
    })
    .then(resp => resp.text()) // 如果servlet返回JSON格式就改成resp.json()
    .then(res => {
        // 提交成功后的自定义逻辑，比如弹出提示、跳转到成功页都可以
        alert('数据提交成功');
    })
    .catch(err => {
        // 提交失败的处理逻辑
        console.error('提交错误：', err);
        alert('数据提交失败，请重试');
    });
});

如果需要兼容低版本浏览器，把Fetch API换成XMLHttpRequest写法即可，逻辑完全一致。

3 Servlet端接收逻辑 #

和普通表单提交的参数获取方式完全相同，不需要额外调整：

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置编码避免中文乱码
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/plain;charset=UTF-8");
    
    // 获取客户信息参数
    String cid = request.getParameter("cid");
    String cname = request.getParameter("cname");
    String email = request.getParameter("email");
    String cnumber = request.getParameter("cnumber");
    String cpet = request.getParameter("cpet");
    
    // 获取宠物信息参数
    String pid = request.getParameter("pid");
    String pname = request.getParameter("pname");
    String ptype = request.getParameter("ptype");
    String page = request.getParameter("page");
    String palergy = request.getParameter("palergy");
    
    // 此处写你自己的数据库写入逻辑
    
    // 返回结果给前端
    response.getWriter().write("success");
}

注意事项 #

• 前端fetch请求里的路径要和你servlet配置的映射路径保持一致
• 可以在提交前加表单非空校验，避免无效数据提交到后端

内容的提问来源于stack exchange，提问作者Darshan Bachhav