JS实现form表单的跳转

本文介绍如何使用JavaScript动态改变表单提交的目标页面,实现从单一表单跳转至多个不同页面的功能。同时,深入探讨了带有验证功能的表单如何通过AJAX实现异步提交,避免页面刷新,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • form表单提交时需要从一个页面跳转至不同的页面,使用js动态提交

      例如:1.jsp跳转至2.jsp和3.jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>跳转</title>
<script type="text/javascript">
    //把表单的action改为2.jsp
    function Two() {
        document.form.action = "2.jsp";
        document.form.submit();
    }
    //把表单的action改为3.jsp
    function Three() {
        document.form.action = "3.jsp";
        document.form.submit();
    }
</script>
</head>
<body>
 
<form action="" method="post" name="form">
    <table width="300" border="1" align="center" bgcolor="#9AD3A4" bordercolor="red">
        <tr><td align="center" colspan="2" >button跳转</td></tr>
        <tr>
            <td><input type="button" value="跳转到2.jsp" onclick="Two()"      class="botton"/></td>
            <td><input type="button" value="跳转到3.jsp" onclick="Three()"    class="botton"/></td>
        </tr>
    </table>
</form>
</body>
</html>

<form class="form-horizontal" action="xxx" method="post" enctype="multipart/form-data" data-   toggle="validator" role="form" novalidate="true" id="patentEditForm"> 
       <button class="btn btn-primary" type="button" id="but_sub">保存</button>
       <button class="btn btn-primary" type="button">保存返回列表</button>
       <button class="btn btn-warning" type="button" onclick="window.location='/biz/project/list';">
           返回
       </button>
</form>

 

$(document).ready(function(){
    var buttonId;

    $('#patentEditForm').validator().on('submit', function (e) {
            if(buttonId == "but_sub"){
                var formData = new FormData($("#patentEditForm")[0]);
                $.ajax({
                    type:"POST",
                    url:"/biz/",
                    data: formData,
                    dataType:"JSON",
                    nsync:false,
                    cache: false,
                    contentType: false, 
                    processData: false,
                    success:function(date){
                        switch(date.status){
                        case 1:
                            $success("保存成功!");
                            break;
                        case 1009:
                            $error("保存失败!");
                            break;
                        default :
                            $error("没有提交信息");
                        }
                    },
                    error:function(){
                        $error("没有提交信息");
                    }
                });
        }
    });

    $(".btn-primary").click(function(){
        buttonId = $(this).attr("id");
        $('#patentEditForm').trigger('submit');
    });

 

### 使用JavaScript实现表单提交后重定向页面 当处理表单提交并希望在成功提交之后重定向到另一个页面时,可以采用多种方法来实现这一目标。一种常见的方式是在服务器端完成数据处理后返回特定响应给客户端,在前端通过监听该响应执行重定向操作。 对于纯前端控制下的场景,则可以直接利用`window.location.href`属性来进行页面跳转[^2]: ```javascript document.querySelector('form').addEventListener('submit', function(event){ event.preventDefault(); // 阻止默认行为 const formData = new FormData(this); fetch('/your-server-endpoint', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => { if (data.success) { // 假设服务端返回了一个表示成功的标志位 window.location.href = '/target-page'; // 成功则转向指定URL } else { alert('Submission failed'); } }); }); ``` 上述代码片段展示了如何捕获表单的提交事件,并阻止其默认动作以便手动发送请求至服务器。一旦接收到预期的成功反馈,就立即改变当前窗口的位置以达到页面切换的效果。 另外,如果项目框架允许的话,也可以考虑使用Post/Redirect/Get模式(Post-Redirect-Get, PRG),它是一种用于Web应用程序设计的最佳实践,能够有效防止重复提交问题以及刷新浏览器时再次触发相同的操作。 #### 实现PRG模式的一个简单例子如下所示: 1. 用户填写表单并通过HTTP POST方式将其提交; 2. 服务器接收请求并对数据进行必要的验证和保存工作; 3. 处理完成后不是直接渲染新的视图而是发出一次临时性的HTTP 3xx状态码(通常是302 Found),并将Location头部设置为目标地址; 4. 浏览器自动跟随这个新位置发起GET请求加载最终显示的内容页; 这种方法不仅提高了用户体验流畅度,还增强了应用的安全性和稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值