jQuery中form表单基本使用
form表單基本使用
文章目錄
- 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 空格轉換未 + 加號，但不對特殊字符編碼(很少用)
表單的同步提交
點擊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>總結
以上是生活随笔為你收集整理的jQuery中form表单基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux文件目录sha256,如何使用
- 下一篇： 内存测试入门