jQuery中form表单基本使用

idiot_MAN

于 2022-09-06 23:23:52 发布

阅读量1.4k

点赞数

分类专栏：前端 jquery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/idiot_MAN/article/details/126736168

版权

前端同时被 2 个专栏收录

67 篇文章 2 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

form表单基本使用

文章目录

form表单基本使用
Ajax提交表单数据

什么是表单

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

form表单的属性

表单的构成

表单由3部分构成

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

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

表单的属性

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

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

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

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

表单的同步提交

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

缺点

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

解决

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

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.preventDefault()阻止表单的提交和页面的跳转

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

快速获取表单中的数据

jQuery提供了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&password=2222
      })
    })
  </script>