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

• • 使用步骤
  • 上代码

使用步骤

需要：

1. 引入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>