jQuery中form表单基本使用

表单在网页中主要负责数据采集的功能，HTML中的form标签，主要用于采集用户输入的信息，并通过 form标签的提交操作，把采集到的信息提交到服务器端进行处理

form 表单的属性

表单的构成

表单由3部分构成

表单标签

表单域（文本框，密码框，多行文本框，复选框，单选框，下拉选择框，文件上传）

表单按钮

form标签的属性
form标签用来采集数据，form标签的属性就是用来规定如何把采集到的数据发送到服务器

表单的属性

action URL地址(后端提供的，这个url 地址专门负责接收表单提交过来的数据) 规定提交表单时，向何处发送表单数据
未指定 action属性值的情况下，action的默认值未当前页面的url 地址

method get或post 规定以何种方式把表单数据提交到 action url
（get 通过url 地址栏传递数据，传递的数量小不安全
 post 通过 http 协议传递，传输的数据量大，安全）

e nc type 规定在发送表单数据之前如何对其进行编码
 application/x–www–form–urlencode d 在发送前编码所有的字符（默认）
multipart/form–data 不对字符编码，文件上传，使用该值
text/plain 空格转换未 + 加号，但不对特殊字符编码(很少用)

    &lt;form action="/login" method="get"&gt;
      &lt;input type="text" name="email" id="" /&gt;
      &lt;br /&gt;
      <input type="password" name="password" />
      <br />
      <input type="checkbox" name="remember" checked />
      <br />
      <button type="submit">提交</button>
    </form>

表单的同步提交

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

缺点

form表单同步提交后，整个页面发生跳转，跳转到action url 指向的地址，用户体验差
fo rm表单同步提交后，页面之前的状态和数据会丢失

解决

表单只负责采集数据，Aja x 负责将数据提交到服务器

Ajax提交表单数据

监听表单提交事件

<body>
    <form action="/login" id="f1">
      <input type="text" name="username" />
      <br />
      <input type="password" name="password" />
      <br />
      <button type="submit">提交</button>
    </form>
  </body>
  <script>
    $(function () {
      $('#f1').submit(function () {
        alert('监听到表单的提交事件')
      })
    })
  </script>

表单的默认 行为

监听到表单提交事件之后，调用事件对象的event.pr eventDe fa ult()阻止表单的提交和页面的跳转

$(function () {
      $('#f1').submit(function (e) {
        alert('监听到表单的提交事件')
        // 阻止表单的提交和页面的跳转
        e.preventDefault()
      })
    })

快速 获取表单中的数据

jQue ry提供了serialize()函数,可以一次性的获取到表单中的所有数据（必须为每个表单元素添加 name属性）

$(selector).serialize()

 <body>
    <form action="/login" id="f1">
      <input type="text" name="username" />
      <br />
      <input type="password" name="password" />
      <br />
      <button type="submit">提交</button>
    </form>
  </body>
  <script>
    $(function () {
      $('#f1').submit(function (e) {
        // alert('监听到表单的提交事件')
        // 阻止表单的提交和页面的跳转
        e.preventDefault()

        var data = $(this).serialize()
        console.log(data) //username=1111&amp;password=2222
      })
    })
  </script>