Serialize form data to JSON
HTML JSON form submission
html <head> include jquery js code :
<!-- 加载js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/2.8.1/jquery.serializejson.min.js"> </script>
then can use methon by JQuery:
var input = $("#inputId").val();var input = $("form.login").serialize();var input = $("form.login").serializeArray();
ext:
$(function(){
$('.ok').on('click',function(){
var x = $('#myform').serializeJSON();
console.log(x);
var auto = {
"description": x.description+'^0-0-0-0-0^'+x.sence_list+'^'+x.mac+'^'+'silent',
"state": x.state,
"timetable": x.timetable,
"trigger": x.trigger,
"action": x.action
}
var sdata = JSON.stringify(auto); //json obj to string
console.log("send json: %s",sdata);
$.post( '/', sdata, function(result) {
console.log("port return : %j",JSON.parse(result));//result string 2 json
});
})
})
EXAMPLE 1: Basic Keys
<form enctype='application/json'>
<input name='name' value='Bender'>
<select name='hind'>
<option selected>Bitable</option>
<option>Kickable</option>
</select>
<input type='checkbox' name='shiny' checked>
</form>
// produces
{
"name": "Bender"
, "hind": "Bitable"
, "shiny": true
}
EXAMPLE 2: Multiple Values
<form enctype='application/json'>
<input type='number' name='bottle-on-wall' value='1'>
<input type='number' name='bottle-on-wall' value='2'>
<input type='number' name='bottle-on-wall' value='3'>
</form>
// produces
{
"bottle-on-wall": [1, 2, 3]
}
EXAMPLE 3: Deeper Structure
<form enctype='application/json'>
<input name='pet[species]' value='Dahut'>
<input name='pet[name]' value='Hypatia'>
<input name='kids[1]' value='Thelma'>
<input name='kids[0]' value='Ashley'>
</form>
// produces
{
"pet": {
"species": "Dahut"
, "name": "Hypatia"
}
, "kids": ["Ashley", "Thelma"]
}
EXAMPLE 4: Sparse Arrays
<form enctype='application/json'>
<input name='hearbeat[0]' value='thunk'>
<input name='hearbeat[2]' value='thunk'>
</form>
// produces
{
"hearbeat": ["thunk", null, "thunk"]
}
EXAMPLE 5: Even Deeper
<form enctype='application/json'>
<input name='pet[0][species]' value='Dahut'>
<input name='pet[0][name]' value='Hypatia'>
<input name='pet[1][species]' value='Felis Stultus'>
<input name='pet[1][name]' value='Billie'>
</form>
// produces
{
"pet": [
{
"species": "Dahut"
, "name": "Hypatia"
}
, {
"species": "Felis Stultus"
, "name": "Billie"
}
]
}
EXAMPLE 6: Such Deep
<form enctype='application/json'>
<input name='wow[such][deep][3][much][power][!]' value='Amaze'>
</form>
// produces
{
"wow": {
"such": {
"deep": [
null
, null
, null
, {
"much": {
"power": {
"!": "Amaze"
}
}
}
]
}
}
}
EXAMPLE 7: Merge Behaviour
<form enctype='application/json'>
<input name='mix' value='scalar'>
<input name='mix[0]' value='array 1'>
<input name='mix[2]' value='array 2'>
<input name='mix[key]' value='key key'>
<input name='mix[car]' value='car key'>
</form>
// produces
{
"mix": {
"": "scalar"
, "0": "array 1"
, "2": "array 2"
, "key": "key key"
, "car": "car key"
}
}
EXAMPLE 8: Append
<form enctype='application/json'>
<input name='highlander[]' value='one'>
</form>
// produces
{
"highlander": ["one"]
}
EXAMPLE 9: Files
<form enctype='application/json'>
<input type='file' name='file' multiple>
</form>
// assuming the user has selected two text files, produces:
{
"file": [
{
"type": "text/plain",
"name": "dahut.txt",
"body": "REFBQUFBQUFIVVVVVVVVVVVVVCEhIQo="
},
{
"type": "text/plain",
"name": "litany.txt",
"body": "SSBtdXN0IG5vdCBmZWFyLlxuRmVhciBpcyB0aGUgbWluZC1raWxsZXIuCg=="
}
]
}
EXAMPLE 10: Bad input
<form enctype='application/json'>
<input name='error[good]' value='BOOM!'>
<input name='error[bad' value='BOOM BOOM!'>
</form>
// Produces:
{
"error": {
"good": "BOOM!"
}
, "error[bad": "BOOM BOOM!"
}
example link form :
https://darobin.github.io/formic/specs/json/#introduction
沒有留言:
張貼留言