禁用Form表单提交的跳转

矫情吗；* 2023-10-02 20:42 29阅读 0赞

### Form表单的默认跳转机制 ###

from表单如下：

浏览器页面展示形式如下：  
![在这里插入图片描述][57b6c2a7e30d4a8e977d8d9cddf0f847.png]  
假设此刻地址是 `ip:port`，点击“Submit Comment” 按钮后，浏览器的地址会跳转到 `ip:port/user/add`。也就是`Form表单提交后，浏览器地址会自动跳转到Form表单的 action 地址`。

有时候，我们只是想要发起一个请求，并不希望浏览器的地址跳转。这就需要禁用Form表单的跳转机制。

### 禁用Form表单的跳转 ###

这里需要用到 jQuery 的一个插件：`jquery form`，首页是：[https://jquery-form.github.io/form/][https_jquery-form.github.io_form]

#### 使用案例 ####

沿用上文的表单

<html>
      <body>
        <form id="myForm" action="/user/add" method="post">
         Name: <input type="text" name="name">
         <input type="submit" value="Submit Comment">
       </form>
      </body>
    </html>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
    <script>
      $(function() {
          
        $('#myForm').ajaxForm(function(res) {
          
            // 处理Form表单请求的响应
        	   console.log(res);
        });
      });
    </script>

ok，这就完事了。Form表单请求由原来的提交按钮触发，还可以使用 `$('#myForm').submit()` 触发。  
核心点就是用到 `$('#myForm').ajaxForm()` 将表单请求升级为 ajax 方式。使用ajax，那浏览器地址自然不会跳转了。

--------------------

end

[57b6c2a7e30d4a8e977d8d9cddf0f847.png]: https://img-blog.csdnimg.cn/57b6c2a7e30d4a8e977d8d9cddf0f847.png
[https_jquery-form.github.io_form]: https://jquery-form.github.io/form/