关于表单提交并且实现前端跳转

关于webjava,最近做的项目都是要求逻辑层(control,action)里面不包含页面(路由)跳转,而要求在前端,根据需要选择跳转,这时候,form里面action就是逻辑处理,然而后面各种在提交button里面,通过js或者jquery实现点击跳转都不好使,最后证实是和action冲突,卡了一天了,各种办法都试了,最后想到,模拟触发a标签来实现。亲测可以实现。

前端:

...

<a id="return" href="<%=contextPath %>//process_list.jsp"><span id="atext"></span></a>
 <span class="l-30" ><input  type="submit" id="sub"  value="保存" ></input></span>


script:

$("#sub").click(function()
{
    $("#atext").trigger("click");
});




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要准备一个 HTML 表单页面,其中包含需要提交的表单元素和一个提交按钮。例如: ```html <!DOCTYPE html> <html> <head> <title>表单提交示例</title> </head> <body> <form id="myForm" action="submit.php" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br> <button type="submit">提交</button> </form> </body> </html> ``` 这个表单包含两个输入框和一个提交按钮,提交按钮会将表单数据发送到 `submit.php` 页面进行处理。 接下来,我们需要使用 JavaScript 代码来实现表单提交和页面跳转操作。例如,以下代码可以在用户点击提交按钮时,阻止表单默认的提交行为,然后使用 Ajax 将表单数据发送到服务器,并根据服务器返回的结果进行页面跳转: ```javascript // 获取表单元素和提交按钮 var form = document.getElementById("myForm"); var submitBtn = form.querySelector("button[type=submit]"); // 在提交按钮上添加点击事件监听器 submitBtn.addEventListener("click", function(event) { // 阻止表单默认的提交行为 event.preventDefault(); // 使用 XMLHttpRequest 对象发送表单数据到服务器 var xhr = new XMLHttpRequest(); xhr.open("POST", form.action, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { // 根据服务器返回的结果进行页面跳转 if (xhr.status === 200) { window.location.href = "success.html"; } else { window.location.href = "error.html"; } } }; xhr.send(new FormData(form)); }); ``` 在这个代码中,我们首先获取了表单元素和提交按钮,并在提交按钮上添加了一个点击事件监听器。当用户点击提交按钮时,我们阻止了表单默认的提交行为,并使用 XMLHttpRequest 对象发送表单数据到服务器。在服务器返回结果后,我们根据返回的结果进行页面跳转。如果返回的状态码为 200,表示提交成功,我们就跳转到 `success.html` 页面;否则,我们就跳转到 `error.html` 页面。 以上就是使用 HBuilder 前端完成表单提交操作和页面跳转操作的示例代码。当然,实际项目中可能还需要加上一些验证、提示等功能,这里只是提供一个基础的示例供参考。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值