技術(shù)員聯(lián)盟提供win764位系統(tǒng)下載,win10,win7,xp,裝機純凈版,64位旗艦版,綠色軟件,免費軟件下載基地!

當前位置:主頁 > 教程 > 服務(wù)器類 >

表單格式化插件jquery.serializeJSON教程

來源:技術(shù)員聯(lián)盟┆發(fā)布時間:2019-10-26 00:02┆點擊:

前端在處理含有大量數(shù)據(jù)提交的表單時,除了使用Form直接提交刷新頁面之外,經(jīng)常碰到的需求是收集表單信息成數(shù)據(jù)對象,Ajax提交。

而在處理復(fù)雜的表單時,需要一個一個區(qū)手動判斷處理字段值,顯得非常麻煩。接下來介紹的插件將解決這個問題。

關(guān)于serializeJSON

使用jquery.serializeJSON,可以在基于jQuery或者Zepto的頁面中,調(diào)用 .serializeJSON() 方法來序列化form表單的數(shù)據(jù)成JS對象。

使用

只需要在jQuery或者Zepto時候引入即可

<script type="text/javascript" src=http://www.3lian.com/edu/2017/06-23/"jquery.js"></script> <script type="text/javascript" src=http://www.3lian.com/edu/2017/06-23/"jquery.serializejson.js"></script>

示例

HTML form(支持input、textarea、select等標簽)

<form id="my-profile"> <!-- simple attribute --> <input type="text" name="fullName" value="Mario Izquierdo" /> <!-- nested attributes --> <input type="text" name="address[city]" value="San Francisco" /> <input type="text" name="address[state][name]" value="California" /> <input type="text" name="address[state][abbr]" value="CA" /> <!-- array --> <input type="text" name="jobbies[]" value="code" /> <input type="text" name="jobbies[]" value="climbing" /> <!-- textareas, checkboxes ... --> <textarea name="projects[0][name]">serializeJSON</textarea> <textarea name="projects[0][language]">javascript</textarea> <input type="hidden" name="projects[0][popular]" value="0" /> <input type="checkbox" name="projects[0][popular]" value="1" checked /> <textarea name="projects[1][name]">tinytest.js</textarea> <textarea name="projects[1][language]">javascript</textarea> <input type="hidden" name="projects[1][popular]" value="0" /> <input type="checkbox" name="projects[1][popular]" value="1"/> <!-- select --> <select name="selectOne"> <option value="paper">Paper</option> <option value="rock" selected>Rock</option> <option value="scissors">Scissors</option> </select> <!-- select multiple options, just name it as an array[] --> <select multiple name="selectMultiple[]"> <option value="red" selected>Red</option> <option value="blue" selected>Blue</option> <option value="yellow">Yellow</option> </select> </form>

javascript:

$('#my-profile').serializeJSON(); // returns => { fullName: "Mario Izquierdo", address: { city: "San Francisco", state: { name: "California", abbr: "CA" } }, jobbies: ["code", "climbing"], projects: { '0': { name: "serializeJSON", language: "javascript", popular: "1" }, '1': { name: "tinytest.js", language: "javascript", popular: "0" } }, selectOne: "rock", selectMultiple: ["red", "blue"] }

serializeJSON方法返回一個JS對象,并非JSON字符串??梢允褂?JSON.stringify 轉(zhuǎn)換成字符串(注意IE8兼容性)。

JavaScript權(quán)威指南(第6版)(中文版)

var jsonString = JSON.stringify(obj);

指定數(shù)據(jù)類型

獲取到的屬性值一般是字符串,可以通過HTML指定類型 : type 進行強制轉(zhuǎn)換。

<form> <input type="text" name="notype" value="default type is :string"/> <input type="text" name="string:string" value=":string type overrides parsing options"/> <input type="text" name="excluded:skip" value="Use :skip to not include this field in the result"/> <input type="text" name="number[1]:number" value="1"/> <input type="text" name="number[1.1]:number" value="1.1"/> <input type="text" name="number[other stuff]:number" value="other stuff"/> <input type="text" name="boolean[true]:boolean" value="true"/> <input type="text" name="boolean[false]:boolean" value="false"/> <input type="text" name="boolean[0]:boolean" value="0"/> <input type="text" name="null[null]:null" value="null"/> <input type="text" name="null[other stuff]:null" value="other stuff"/> <input type="text" name="auto[string]:auto" value="text with stuff"/> <input type="text" name="auto[0]:auto" value="0"/> <input type="text" name="auto[1]:auto" value="1"/> <input type="text" name="auto[true]:auto" value="true"/> <input type="text" name="auto[false]:auto" value="false"/> <input type="text" name="auto[null]:auto" value="null"/> <input type="text" name="auto[list]:auto" value="[1, 2, 3]"/> <input type="text" name="array[empty]:array" value="[]"/> <input type="text" name="array[list]:array" value="[1, 2, 3]"/> <input type="text" name="object[empty]:object" value="{}"/> <input type="text" name="object[dict]:object" value='{"my": "stuff"}'/> </form>