前端【免費(fèi)下載鏈接】formjQuery Form Plugin項(xiàng)目地址https://gitcode.com/gh_mirrors/fo/form點(diǎn)擊查看免費(fèi)下載本篇圍繞 jQuery Form Plugin 官方 FAQdocs/faq.md逐條展開(kāi)從插件的 jQuery 版本依賴(lài)與兼容性到ajaxForm/ajaxSubmit的行為差異與取消提交的實(shí)現(xiàn)再到表單數(shù)據(jù)為何只提交成功控件、文件上傳的 XHR2/iframe 雙通道機(jī)制與進(jìn)度回調(diào)全部結(jié)論均結(jié)合 src/jquery.form.js 源碼與 test/test.js 測(cè)試用例給出可驗(yàn)證依據(jù)。讀完后你將能夠準(zhǔn)確判斷該插件在何種 jQuery 環(huán)境可用并理解每一次ajaxSubmit調(diào)用從序列化到發(fā)送的完整內(nèi)部鏈路。依賴(lài)與 jQuery 版本兼容性FAQ 的前兩個(gè)問(wèn)題回答了最基礎(chǔ)的環(huán)境前提插件唯一的依賴(lài)就是 jQuery 本身沒(méi)有其它第三方依賴(lài)官方口徑是兼容 jQuery v1.7.2 及之后版本包括 2.x 與 3.x。這一口徑在倉(cāng)庫(kù)中有三處對(duì)應(yīng)證據(jù)src/jquery.form.js 文件頭注釋明確寫(xiě)著version: 4.3.0與Requires jQuery v1.7.2 or laterpackage.json 中dependencies聲明為jquery: 1.7.2且devDependencies顯示其測(cè)試基線使用jquery: ^3.5.1即當(dāng)前 4.3.0 版本是在 jQuery 3.5.x 下做測(cè)試驗(yàn)證的README.md 的 Compatibility 一節(jié)給出了比 FAQ 更精確的適用邊界建議在選型時(shí)以它為準(zhǔn)jQuery 版本兼容性README 表述1.7.2 及以上必須Requires2.x兼容3.x部分兼容Partially compatible3.x Slim 構(gòu)建不兼容Not compatible需要注意的適用前提FAQ 說(shuō)兼容 3.x而 README 明確寫(xiě)的是Partially compatible with jQuery 3且 jQuery 3 Slim 因移除了部分傳統(tǒng)特性README 中指向 jQuery 3 兼容性改造相關(guān)的歷史 issue完全不被支持。從源碼結(jié)構(gòu)看src/jquery.form.js 啟動(dòng)時(shí)做特征檢測(cè)feature.fileapi、feature.formdata并依賴(lài)$.ajaxSettings、$.Deferred、$.param等傳統(tǒng) API這解釋了為何對(duì) Slim 構(gòu)建不兼容。另外delegation事件委托選項(xiàng)要求 jQuery 1.7源碼中通過(guò)options.delegation $.isFunction($.fn.on)做了硬性校驗(yàn)src/jquery.form.js。最簡(jiǎn)單的用法ajaxForm 是一站式入口FAQ 指出ajaxForm是啟用 AJAX 提交最簡(jiǎn)單的方式。標(biāo)準(zhǔn)寫(xiě)法是在文檔 ready 之后調(diào)用// 將頁(yè)面上所有 form 交給插件統(tǒng)一管理事件綁定 $(form).ajaxForm({ target: #myResultsDiv // 服務(wù)端響應(yīng)將被寫(xiě)入該元素 });ajaxForm的本質(zhì)是只綁定事件、不提交表單。它的源碼實(shí)現(xiàn)src/jquery.form.js做了三件事若開(kāi)啟delegation: true則在document上以命名空間form-plugin委托綁定submit與click事件這樣尚未加入 DOM 的表單也能被處理這是處理動(dòng)態(tài)表單的推薦姿勢(shì)// 現(xiàn)有表單和將來(lái)動(dòng)態(tài)插入的表單都會(huì)走 AJAX 提交 $(form).ajaxForm({ delegation: true, target: #myResultsDiv });對(duì)應(yīng)源碼src/jquery.form.jsif (options.delegation) { $(document) .off(submit.form-plugin, this.selector, doAjaxSubmit) .off(click.form-plugin, this.selector, captureSubmittingElement) .on(submit.form-plugin, this.selector, options, doAjaxSubmit) .on(click.form-plugin, this.selector, options, captureSubmittingElement); return this; }非委托模式下先調(diào)用ajaxFormUnbind()解綁舊的事件off(submit.form-plugin click.form-plugin)見(jiàn) src/jquery.form.js再重新綁定。因此可以對(duì)同一個(gè)表單重復(fù)調(diào)用ajaxForm更新配置而不會(huì)疊加事件源碼中的beforeFormUnbind選項(xiàng)就是為解綁前最后操作表單提供的鉤子。若選擇器匹配到 0 個(gè)元素且 DOM 未就緒源碼會(huì)把調(diào)用排入 ready 隊(duì)列延遲執(zhí)行src/jquery.form.js避免因腳本位置問(wèn)題綁不上事件。源碼頭部的大段 Usage Notesrc/jquery.form.js也明確了兩條使用鐵律不要對(duì)同一個(gè)表單同時(shí)使用ajaxSubmit和ajaxForm兩者是互斥的想自己綁定提交處理函數(shù)就用ajaxSubmit想讓插件全權(quán)管理事件就用ajaxForm使用ajaxForm時(shí)ajaxSubmit會(huì)在合適的時(shí)機(jī)由插件代為調(diào)用。ajaxForm 與 ajaxSubmit 的核心區(qū)別FAQ 給出了兩條官方差異二者都可以從源碼中逐句印證差異一ajaxSubmit立即提交ajaxForm只做準(zhǔn)備。調(diào)用ajaxSubmit會(huì)立刻序列化表單數(shù)據(jù)并發(fā)送ajaxForm只是把事件監(jiān)聽(tīng)器掛上去等用戶(hù)真正觸發(fā) submit 事件時(shí)內(nèi)部處理函數(shù)doAjaxSubmit才會(huì)去調(diào)用ajaxSubmit// 私有事件處理器src/jquery.form.js L1029-L1037 function doAjaxSubmit(e) { var options e.data; if (!e.isDefaultPrevented()) { e.preventDefault(); $(e.target).closest(form).ajaxSubmit(options); } }典型的手動(dòng)綁定寫(xiě)法來(lái)自 README.md 的 API 示例$(form).on(submit, function(e) { e.preventDefault(); // 必須阻止原生提交 $(this).ajaxSubmit({ target: #myResultsDiv }); });差異二ajaxForm會(huì)附帶提交元素的 name/value或圖片坐標(biāo)。ajaxForm額外綁定了click.form-plugin事件由captureSubmittingElementsrc/jquery.form.js記錄用戶(hù)點(diǎn)擊的是哪個(gè)按鈕把目標(biāo)元素存入form.clk若是typeimage還會(huì)計(jì)算點(diǎn)擊坐標(biāo)寫(xiě)入form.clk_x/form.clk_y優(yōu)先用e.offsetX/offsetY否則用$.fn.offset或offsetLeft/offsetTop降級(jí)計(jì)算并在 100 毫秒后自動(dòng)清空。這些提交元素?cái)?shù)據(jù)最終出現(xiàn)在兩處發(fā)送路徑XHR 路徑$.fieldValue中(t submit || t image) el.form el.form.clk ! el返回nullsrc/jquery.form.js即默認(rèn)序列化不包含提交按鈕只有form.clk指向的那個(gè)按鈕會(huì)被formToArray在末尾補(bǔ)入src/jquery.form.js包括.x/.y坐標(biāo)字段iframe 路徑fileUploadIframe內(nèi)部直接讀取form.clk并把其值塞進(jìn)s.extraDatasrc/jquery.form.js。因此同一個(gè)后端接口在ajaxForm用戶(hù)點(diǎn)擊觸發(fā)與ajaxSubmitJS 主動(dòng)觸發(fā)、無(wú)form.clk兩種入口下收到的數(shù)據(jù)可能不同——這是 FAQ 第二條差異帶來(lái)的實(shí)際影響排查為什么按鈕值有時(shí)傳不上去時(shí)值得注意。如何取消表單提交FAQ 的答案添加beforeSubmit回調(diào)并返回false。其內(nèi)部實(shí)現(xiàn)在 src/jquery.form.js// give pre-submit callback an opportunity to abort the submit if (options.beforeSubmit options.beforeSubmit(a, this, options) false) { log(ajaxSubmit: submit aborted via beforeSubmit callback); return this; }回調(diào)簽名為beforeSubmit(arr, $form, options)第一個(gè)參數(shù)是序列化后的數(shù)據(jù)數(shù)組形如[{ name: username, value: jresig }, ...]可直接做校驗(yàn)$(#myForm).ajaxSubmit({ beforeSubmit: function(arr, $form, options) { var fields {}; $.each(arr, function() { fields[this.name] this.value; }); if (!fields.username) { alert(用戶(hù)名不能為空); return false; // 返回 false 即取消本次提交 } }, success: function(response) { /* 處理響應(yīng) */ } });從源碼結(jié)構(gòu)看ajaxSubmit實(shí)際提供了四個(gè)可中斷點(diǎn)按執(zhí)行順序排列form-pre-serialize事件src/jquery.form.js序列化之前觸發(fā)外部監(jiān)聽(tīng)者設(shè)置veto.veto即可否決beforeSerialize回調(diào)src/jquery.form.js返回false取消適合在取值前修改 DOMbeforeSubmit回調(diào)見(jiàn)上文拿到完整數(shù)據(jù)數(shù)組后再?zèng)Q定是否放行form-submit-validate事件src/jquery.form.js同樣是可 veto 的事件。其中beforeSubmit也是 test/test.js 中ajaxSubmit: pre-submit callback用例驗(yàn)證過(guò)的行為回調(diào)確實(shí)會(huì)收到數(shù)據(jù)數(shù)組和表單對(duì)象兩個(gè)參數(shù)。為什么有些輸入值沒(méi)有提交序列化遵循 HTML 成功控件規(guī)則FAQ 中Why arent all my input values posted?一條給出了權(quán)威解釋插件的序列化嚴(yán)格遵循 HTML 規(guī)范只有 successful controls成功控件才會(huì)進(jìn)入提交數(shù)據(jù)。這一點(diǎn)在源碼中有非常具體的實(shí)現(xiàn)。核心判定邏輯在$.fieldValuesrc/jquery.form.js當(dāng)successful為默認(rèn)值true時(shí)以下情況一律返回null即不提交元素狀態(tài)源碼判定條件是否提交沒(méi)有name屬性!n否被禁用el.disabled否typereset/typebuttont reset \|\| t button否未勾選的 checkbox / radio(t checkbox \|\| t radio) !el.checked否提交按鈕/圖片按鈕但不是點(diǎn)擊的那個(gè)(t submit \|\| t image) el.form el.form.clk ! el否select 無(wú)任何選中項(xiàng)tag select el.selectedIndex -1否外層formToArraysrc/jquery.form.js在遍歷form.elements時(shí)同樣以if (!n || el.disabled) continue;跳過(guò)無(wú)名或禁用的元素src/jquery.form.js。幾個(gè)實(shí)戰(zhàn)提示禁用控件不提交是看起來(lái)沒(méi)提交的最常見(jiàn)原因若希望臨時(shí)啟用某組字段可用插件提供的enable()工具方法src/jquery.form.js多值字段多選的 select、多個(gè)選中的 checkbox/radio會(huì)被展開(kāi)成多條同 name 記錄src/jquery.form.jstest/test.js 的formToArray: multi-select用例正是斷言一個(gè)多選字段產(chǎn)生 3 條記錄、整表共 13 條fieldValue(el, successful)的第二個(gè)參數(shù)可以傳false此時(shí)跳過(guò)成功控件檢查、直接返回$(el).val()適合調(diào)試時(shí)看看這個(gè)字段到底有什么值表單外的:input通過(guò)form屬性關(guān)聯(lián)也能被序列化formToArray里專(zhuān)門(mén)處理了這種情況src/jquery.form.jstest/test.js 的formToArray: outside fields用例如是驗(yàn)證序列化結(jié)果統(tǒng)一交給$.param做 URL 編碼formSerialize()返回name1value1name2value2形式的字符串src/jquery.form.js。關(guān)于 FAQ 中序列化是否準(zhǔn)確、性能如何一問(wèn)原文檔引用了作者站外維護(hù)的跨庫(kù)對(duì)比頁(yè)包含 Prototype、dojo 的對(duì)照數(shù)據(jù)。該頁(yè)面不在本倉(cāng)庫(kù)內(nèi)本文不轉(zhuǎn)述任何具體性能數(shù)字可以確認(rèn)的是插件自身用 test/test.js約 914 行基于 mocha chai覆蓋了formToArray的多選展開(kāi)、semantic 順序、表單外字段、action/method同名 input 干擾test/test.js等邊界場(chǎng)景序列化行為有較完整的回歸驗(yàn)證。文件上傳XHR2 與 iframe 雙通道以及進(jìn)度顯示FAQ 明確回答支持文件上傳并指出官方提供上傳進(jìn)度演示。從源碼看插件在每次ajaxSubmit時(shí)自動(dòng)選擇上傳通道// 特征檢測(cè)src/jquery.form.js L98-L99 feature.fileapi $(input typefile).get(0).files ! undefined; feature.formdata (typeof window.FormData ! undefined); // ... var fileAPI feature.fileapi feature.formdata; var shouldUseFrame (hasFileInputs || multipart) !fileAPI; if (options.iframe ! false (options.iframe || shouldUseFrame)) { jqxhr fileUploadIframe(a); // 通道一隱藏 iframe } else if ((hasFileInputs || multipart) fileAPI) { jqxhr fileUploadXhr(a); // 通道二XHR2 FormData } else { jqxhr $.ajax(options); // 通道三普通 $.ajax }判定邏輯src/jquery.form.js存在已選擇文件的input[typefile]、或表單enctypemultipart/form-data時(shí)視為上傳請(qǐng)求瀏覽器支持 File API 和FormData時(shí)走fileUploadXhr否則退回fileUploadIframe。options.iframe: true可強(qiáng)制走 iframe 通道。通道一fileUploadXhrsrc/jquery.form.js。把表單數(shù)組逐項(xiàng)formdata.append(name, value)并強(qiáng)制contentType: false、processData: false、cache: false、默認(rèn)POST最后交給$.ajax發(fā)送。通道二fileUploadIframesrc/jquery.form.js。面向不支持 XHR2 的老瀏覽器的兼容方案動(dòng)態(tài)創(chuàng)建iframe namejqFormIO時(shí)間戳 srcabout:blank并絕對(duì)定位到屏幕外IE/HTTPS 下src用javascript:false見(jiàn) src/jquery.form.js臨時(shí)改寫(xiě)表單的target/method/action/enctype后執(zhí)行原生form.submit()完成后在finally中還原屬性并移除臨時(shí)隱藏域src/jquery.form.js構(gòu)造一個(gè)mock xhr對(duì)象abort、responseText、responseXML、status等模擬 XHR 語(yǔ)義保證success/error/complete回調(diào)行為與普通 ajax 一致并觸發(fā)ajaxStart/ajaxSend等全局事件src/jquery.form.js響應(yīng)讀取支持服務(wù)器把 JSON 包在textarea或pre中返回、以及status/statusText屬性模擬src/jquery.form.js內(nèi)置 Rails CSRF 處理自動(dòng)讀取meta namecsrf-token并注入額外字段src/jquery.form.js。上傳進(jìn)度uploadProgress回調(diào)。FAQ 提到的進(jìn)度演示對(duì)應(yīng)的機(jī)制在fileUploadXhr內(nèi)部src/jquery.form.jsif (options.uploadProgress) { // workaround because jqXHR does not expose upload property s.xhr function() { var xhr $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener(progress, function(event) { var percent 0; var position event.loaded || event.position; var total event.total; if (event.lengthComputable) { percent Math.ceil(position / total * 100); } options.uploadProgress(event, position, total, percent); }, false); } return xhr; }; }回調(diào)簽名為uploadProgress(event, position, total, percentComplete)其中percentComplete由Math.ceil(loaded / total * 100)計(jì)算。使用示例$(#uploadForm).ajaxForm({ url: upload.php, // 每有上傳進(jìn)度即回調(diào)瀏覽器不支持 XHR2 進(jìn)度事件時(shí)不會(huì)觸發(fā) uploadProgress: function(e, position, total, percent) { $(#bar).text(已上傳 percent %); }, success: function(resp) { // 上傳完成 } });適用限制uploadProgress只在走fileUploadXhr且瀏覽器暴露xhr.upload時(shí)生效iframe 通道無(wú)法提供字節(jié)級(jí)進(jìn)度。另外源碼提供了forceSync選項(xiàng)src/jquery.form.js默認(rèn) iframe 通道會(huì)setTimeout(doSubmit, 10)讓瀏覽器先渲染正在上傳...之類(lèi)的提示設(shè)為true則去掉這段短延遲立即提交。單元測(cè)試套件如何本地驗(yàn)證插件行為FAQ 確認(rèn)插件有完整的單元測(cè)試套件。在本倉(cāng)庫(kù)中這套測(cè)試就是 test/test.js914 行斷言mocha chai配套頁(yè)面 test/test.html 與響應(yīng)樁文件 test/ajax/構(gòu)建與測(cè)試流程定義在 Gruntfile.jsnpm install # 安裝 devDependenciesmocha ^7.2.0、chai ^4.2.0 等 npm test # 等價(jià)于 grunt testeslint 靜態(tài)檢查 mocha 運(yùn)行 test/*.html從 Gruntfile.js 看任務(wù)注冊(cè)為lint僅跑 eslinttest為[lint, mocha]default為[test, uglify]測(cè)試通過(guò)后把src/*.js壓縮輸出到dist/*.min.js并生成 sourceMap。pre-commit 鉤子install/pre-commit.sh也會(huì)在提交前強(qiáng)制執(zhí)行g(shù)runt test。測(cè)試用例與本文各 FAQ 主題一一對(duì)應(yīng)可作為回歸參照f(shuō)ormToArray: multi-select/semantic testtest/test.js多值展開(kāi)與 semantic 順序ajaxSubmit: pre-submit callbacktest/test.jsbeforeSubmit收到數(shù)據(jù)數(shù)組并可在其中做校驗(yàn)resetForm (text input)/resetForm (select)test/test.jsresetForm恢復(fù)初始值ajaxSubmit: target String / jQuery object / DOM elementtest/test.jstarget選項(xiàng)三種取值形式。小結(jié)把 FAQ 的十個(gè)問(wèn)題合起來(lái)看可以濃縮為一張決策表場(chǎng)景結(jié)論與依據(jù)環(huán)境準(zhǔn)備僅需 jQuery ≥1.7.2jQuery 3 部分兼容、3 Slim 不兼容README.md Compatibility 一節(jié)全托管式 AJAX 提交ajaxForm含delegation: true處理動(dòng)態(tài)表單src/jquery.form.js手動(dòng)控制提交時(shí)機(jī)自己綁submit事件調(diào)ajaxSubmit勿與ajaxForm同表單混用提交前校驗(yàn)/取消beforeSubmit返回false另有form-pre-serialize/form-submit-validate兩個(gè) veto 事件數(shù)據(jù)缺失排查序列化只包含 HTML 成功控件無(wú)名、禁用、未勾選、未選中項(xiàng)一律不傳src/jquery.form.js文件上傳XHR2FormData 優(yōu)先iframe 兜底iframe: true可強(qiáng)制uploadProgress提供 XHR2 通道下的百分比進(jìn)度行為驗(yàn)證grunt testeslint mocha用例見(jiàn) test/test.js以上所有行號(hào)引用均基于當(dāng)前倉(cāng)庫(kù)的 4.3.0 版本源碼src/jquery.form.js1540 行升級(jí)插件版本后請(qǐng)以新版實(shí)現(xiàn)為準(zhǔn)。贊分享前端【免費(fèi)下載鏈接】formjQuery Form Plugin項(xiàng)目地址https://gitcode.com/gh_mirrors/fo/form點(diǎn)擊查看免費(fèi)下載相關(guān)推薦jQuery Form Plugin API 深度解析ajaxForm、ajaxSubmit 與表單序列化方法全解jQuery Form Plugin API 深度解析ajaxForm、ajaxSubmit 與表單序列化方法全解 jQuery Form Plugin 的核前端jQuery Form Plugin 實(shí)戰(zhàn)指南ajaxForm/ajaxSubmit 實(shí)現(xiàn) AJAX 表單提交、文件上傳與數(shù)據(jù)序列化jQuery Form Plugin 實(shí)戰(zhàn)指南ajaxForm/ajaxSubmit 實(shí)現(xiàn) AJAX 表單提交、文件上傳與數(shù)據(jù)序列化 jQuery Form前端jQuery Form Plugin 實(shí)戰(zhàn)指南用 ajaxForm 與 ajaxSubmit 實(shí)現(xiàn) AJAX 提交、提交前校驗(yàn)與文件上傳jQuery Form Plugin 實(shí)戰(zhàn)指南用 ajaxForm 與 ajaxSubmit 實(shí)現(xiàn) AJAX 提交、提交前校驗(yàn)與文件上傳 jQuery For前端上一篇OpenCalib自動(dòng)駕駛多傳感器標(biāo)定的技術(shù)突破與實(shí)踐指南下一篇Akka Streams Sink.preMaterialize 詳解立即物化 Sink 并獲取物化值創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考