Adds the method .serializeJSON() to jQuery (or Zepto) that serializes a form into a JavaScript Object, using the same format as the default Ruby on Rails request params.
Install with bower bower install jquery.serializeJSON, or npm npm install jquery-serializejson, or just download the jquery.serializejson.js script.
And make sure it is included after jQuery, for example:
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.serializejson.js"></script>HTML form:
<form> <input type="text" name="title" value="Finding Loot"/> <input type="text" name="author[name]" value="John Smith"/> <input type="text" name="author[job]" value="Legendary Pirate"/></form>JavaScript:
$('form').serializeJSON();// returns =>{ title: "Finding Loot", author: { name: "John Smith", job: "Legendary Pirate" }}Form input, textarea and select tags are supported. Nested attributes and arrays can be specified by using the attr[nested][nested] syntax.
HTML form:
<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" /> <!-- nested arrays, 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"]}The serializeJSON function returns a JavaScript object, not a JSON String. The plugin should probably have been called serializeObject or similar, but those plugins already existed.
To convert into a JSON String, use the JSON.stringify method, that is available on all major new browsers. If you need to support very old browsers, just include the json2.js polyfill (as described on stackoverfow).
var obj = $('form').serializeJSON();var jsonString = JSON.stringify(obj);聯(lián)系客服
