form 表单的基本使用

form 表单的 enctype 属性

 

 

 

 

 

 

表单的同步提交及缺点

什么是表单的同步提交

通过点击submit按钮，触发表单提交的操作，从而使页面跳转到action URL 的行为，叫做表单的同步提交。

 

表单同步提交的缺点

<form> 表单同步提交后, 整个页面会发生跳转, 跳转到 action URL 所指向的地址, 用户体验很差.

<form> 表单同步提交后, 页面之前的状态和数据会丢失.

 

如何解决表单同步提交的缺点

如果使用表单提交数据, 则会导致以下两个问题 :

   1. 页面会发生跳转

   2. 页面之前的状态和数据会丢失

解决方案 : 表单只负责采集数据, Ajax 负责将数据提交到服务器.

 

阻止表单的默认行为

 e.preventDefault()

$(function () {
      $('#f1').on('submit', function() {
        alert('asdf');
        e.preventDefault()
        })
    })

 

快速获取表单中的数据

 

 

代码示例 : 

<form action="/login" id="f1">
    <input type="text" name="sadf">
    <input type="password" name="password">
    <button type="submit">提交</button>
  </form>

  <script>
    $(function () {
      // 方式1
      $('#f1').submit(function (e) {
        // 阻止默认行为
        e.preventDefault();
        // 快速获取到值
        let str = $(this).serialize();
        console.log(str);
      })
    })
</script>