当前位置: 首页 > 工具软件 > jQuery.form > 使用案例 >

jQuery中form表单基本使用

师增
2023-12-01

form表单基本使用

什么是表单

表单在网页中主要负责数据采集的功能,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>
 类似资料: