diff --git a/README.md b/README.md index bdd5fb93..f33243a0 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,13 @@ An object containing extra data that should be submitted along with the form. ```` data: { key1: 'value1', key2: 'value2' } ```` +### requestFormat +Available value: + +* `form` : post request body with http form (x-www-form-urlencoded) format, this is default option. +* `json` : post request data with json string in post body. + * You may need polyfill `JSON` functionality with old browsers, recommending: https://github.com/douglascrockford/JSON-js/blob/master/json2.js + ### dataType Expected data type of the response. One of: null, 'xml', 'script', or 'json'. The dataType option provides a means for specifying how the server response should be handled. This maps directly to jQuery's dataType method. The following values are supported: diff --git a/src/jquery.form.js b/src/jquery.form.js index 2a75fe0c..8d05fe4f 100644 --- a/src/jquery.form.js +++ b/src/jquery.form.js @@ -170,6 +170,7 @@ url : url, success : $.ajaxSettings.success, type : method || $.ajaxSettings.type, + requestFormat: 'form', iframeSrc : /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank' // eslint-disable-line no-script-url }, options); @@ -200,9 +201,10 @@ var elements = []; var qx, a = this.formToArray(options.semantic, elements, options.filtering); + var optionsData; if (options.data) { - var optionsData = $.isFunction(options.data) ? options.data(a) : options.data; + optionsData = $.isFunction(options.data) ? options.data(a) : options.data; options.extraData = optionsData; qx = $.param(optionsData, traditional); @@ -232,7 +234,13 @@ if (options.type.toUpperCase() === 'GET') { options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q; options.data = null; // data is null for 'get' + } else if (options.requestFormat.toLowerCase() === 'json') { + var formData = this.formArrayToJsonData(a); + var jsonData = $.extend({}, formData, traditional); + options.data = JSON.stringify(jsonData); + options.contentType = 'application/json'; } else { + // form-data post options.data = q; // data is the query string for 'post' } @@ -1193,6 +1201,19 @@ return $.param(this.formToArray(semantic)); }; + /** + * Transform form array data into json object. + */ + $.fn.formArrayToJsonData = function (arrayOfData) { + var result = {}; + + $.each(arrayOfData, function (index, node) { + result[node.name] = node.value; + }); + + return result; + }; + /** * Serializes all field elements in the jQuery object into a query string. * This method will return a string in the format: name1=value1&name2=value2 diff --git a/test/test.js b/test/test.js index 13bd9431..1be4d838 100644 --- a/test/test.js +++ b/test/test.js @@ -65,6 +65,26 @@ describe('form', function() { } }); + it('formToArray: json object', function() { + var a = $('#form1').formToArray(); + var o = $.fn.formArrayToJsonData(a); + // console.log(JSON.stringify(o,0,4)); + assert.strictEqual(o.constructor, Object, 'type check'); + assert.deepEqual(o, { + "Hidden": "hiddenValue", + "Name": "MyName1", + "Password": "", + "Multiple": "six", + "Single": "one", + "Single2": "A", + "Check": "2", + "Radio": "2", + "action": "1", + "method": "2", + "Text": "This is Form1" + }); + }); + it('formToArray: text promotion for missing value attributes', function() { var expected = [ { name: 'A', value: ''},