JQ使用form表单提交数据，跳转指定页面或进行提交后的操作

最新推荐文章于 2025-09-15 09:49:37 发布

原创最新推荐文章于 2025-09-15 09:49:37 发布 · 3.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript

本文介绍如何在原生项目中使用jQuery和jQuery.form插件进行表单数据提交，实现页面跳转及提交后的操作。通过具体代码示例，详细讲解了配置和使用方法。

原生项目中JQ使用form表单提交数据，跳转指定页面或进行提交后的操作

- 使用步骤
- 上代码

使用步骤

需要：

引入jquery.js jquery.form.js，我使用的是cdn引入，避免下文件

上代码

引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

from表单：

<form action="/login" method="post" id="ajaxForm" nsubmit="return true "; >
   <label>Username
     <input type="text" name="username" />
   </label>
   <label>Password
     <input type="password" name="password"  />
   </label>
   <input id="loginSubmit" class="border-button right blue"  value="Login" 
</form>

js业务代码：

<script>
    $('#loginSubmit').on('click', function() {
        $('form').on('submit', function() {

            $(this).ajaxSubmit({
                type: 'post', // 提交方式 get/post
                url: '/login', // 需要提交的 url
                success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
                    // 此处可对 data 作相关处理
                    // alert('提交成功！');
                    window.location.href='/play'
                },
        })
            //$(this).resetForm() // 提交后重置表单;
            return false; // 阻止表单自动提交事件，必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
        });
    });
</script>