https://github.com/zhoukekestar/form-json
A ajax submiter with json for form
https://github.com/zhoukekestar/form-json
ajax-submiter application-json form form-json json
Last synced: 2 months ago
JSON representation
A ajax submiter with json for form
- Host: GitHub
- URL: https://github.com/zhoukekestar/form-json
- Owner: zhoukekestar
- License: mit
- Created: 2017-04-20T02:33:23.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-21T08:09:42.000Z (almost 9 years ago)
- Last Synced: 2025-07-02T03:05:19.298Z (12 months ago)
- Topics: ajax-submiter, application-json, form, form-json, json
- Language: JavaScript
- Size: 22.5 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# form-json
A ajax submiter with json for form. This project is based on [modules/formJSON](https://github.com/zhoukekestar/modules/tree/master/src/formJSON). Online [mocha test](https://zhoukekestar.github.io/form-json/test/index.html).
# Quick Start
Import `form-json.js`, and set your form enctype to `application/form-json`. That's all what you need to do.
```html
```
# Input Syntax
[Try it Online!](https://zhoukekestar.github.io/form-json/public/input-syntax.html)
| syntax | input | output |
| -- | -- | -- |
| `a` | `` | { "a": "c" } |
| `a.` | `` | {
"a": [
"a."
]
} |
| `a.b` | `` | {
"a": {
"b": "c"
}
} |
| `a.NUMBER.b` | ``
``
`` | {
"a": [
{
"b": "a1a"
},
{
"a": "a6a",
"b": "a6b",
}
]
} |
# Type Syntax
[Try it Online!](https://zhoukekestar.github.io/form-json/public/type-syntax.html)
| syntax | input | output |
| -- | -- | -- |
| `:string` | `` | { "a": "b" } |
| `:bool` | `` | { "a": true } |
| `:number` | `` | { "a": 10 } |
| `:object` | `` | {
"a": {
"key": "value"
}
} |
| `:timestamp` | `` | { "a": 946684800000 } |
You can register a custom type parser to FormJSON for your data. Example:
```html
HTMLFormJSONElement.registerType('ISOString', function (value) {
return new Date(value).toISOString();
})
// output will be:
// {
// "a": "2017-03-30T23:00:00.000Z"
// }
```
# Form Methods (refer to jQuery.ajax)
* `beforeSend(xhr)`
* `beforeStringify(data)`
* `dataFilter(data)`
* `onsuccess(data, textStatus, xhr)` OR `success` event which include infomation in `e.detail`
* `onerror(xhr, textStatus, errorThrown)` OR `error` event which include infomation in `e.detail`
* `oncomplete(xhr, textStatus)` OR `complete` event which include infomation in `e.detail`
Example, [Try it online](https://zhoukekestar.github.io/form-json/public/methods.html):
```html
var form = document.querySelector('form');
form.beforeSend = function (xhr) {
xhr.setRequestHeader('X-Requested-With', 'form-json');
}
form.beforeStringify = function (data) {
data.beforeStringify = true;
return data;
}
/**
* POST data:
* {
* "a": "b",
* "beforeStringify": true
* }
*/
form.onsuccess = function (data) {
console.log('response:' + JSON.stringify(data));
}
```
# Form Attributes
* [Try it online!](https://zhoukekestar.github.io/form-json/public/attributes.html)
* `number2array="true|false"`, default: true.
* `orderby="number|element"`, default: `number`. Attention: `number2array` must be `true`, otherwise it doesn't work.
# Form-json in Form
Yes, you can have an embed form-json in `form` like this:
```html
submit outter form
submit inner form
window.submit1 = function () {
form1.submit();
form1.dispatchEvent(new CustomEvent('submit', { bubbles: true }));
}
window.submit2 = function () {
form2.dispatchEvent(new CustomEvent('form-json-submit', { bubbles: true }));
}
```
# Browser compatibility
`form-json.js` is support most modern browsers include `IE 10+, Android 3.0+, iOS 5.1+` as [`XMLHttpRequest`](http://caniuse.com/#feat=xhr2) is required.
# FQA
* Q: What we don't support ?
* Do not support fill null in array.
```html
```
```json
// We won't output:
{
"a": [
"0", null, null, "3"
]
}
// but output this:
{
"a": [
"0", "3"
]
}
```
* Do not support too complex syntax. I will keep syntax as simple as possible.
* Q: Why you write another form-json ?
A: I want simple syntax and easy to use module. Of course, it should be tiny size.