Can I post JSON without using AJAX?

Question

I have some data, say:

var dat = JSON.stringify(frm.serializeArray()) 

I want to send this to the server using roundtrip (aka, non ajax).

I know that this is possible, but I cannot find any literature on it. Ideas?

(I am using jQuery if this simplifies)

EDIT: while all of these answers still answer this question, I had to include that I want a “content type” from “application / JSON”

Answer 1

• Create an HTML form with the unique id attribute. You can hide it with CSS "display: none". Also fill in the attributes of the action and method.
• Add a text or hidden input field to the form. make sure you give it a meaningful name attribute. This is the name that the server will receive data internally.
• Using jQuery (or plain old javascript), copy the "dat" variable into the input field
• Submit the form using a script

Answer 2

There is a working draft to support the so-called HTML-JSON-FORMS, see http://www.w3.org/TR/2014/WD-html-json-forms-20140529/

So far, use ajax or send json to the input text box.

Answer 3

 <form action="xxx.aspx" method="POST"> <input type='hidden' id='dat' /> <!-- Other elements --> </form> <script type='text/javascript'> $('#dat').val(JSON.stringify(frm.serializeArray())); </script> 

Answer 4

You will need to assign the json string to the input value inside the form tag so that it gets POSTed to the server (either by the user who submitted the form, or by clicking the submit button programmatically).

As an alternative from javascript, you can use window.location to send a variable as part of a GET request.

Answer 5

In another answer, someone mentioned the W3 working draft, which is now outdated, and the new version of the document says that we can use enctype="application/json" for the form and it will send whole form fields as properties of the object.

It’s still not clear to me how to send an array, but referring to the above document, you can send an object just like:

 <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} 

I cannot copy the entire document here, so look at the document to learn how to create more complex objects using array entries and parsing arrays in input field names.

To create a form from your object, you must make a series of input elements that produce the same JSON object that you have in your hands. You can do this manually or, if your object is large enough, you can use a piece of code to convert your object into the desired input elements. I ended up with something like the code below as a basis. You can change it as you like (for example, make the form hidden or even create more diverse types of input fields with styles for different types of properties for the real correct form)

 (function () { const json = { bool: false, num: 1.5, str: 'ABC', obj: {b:true, n: .1, s: '2', a: [1, '1']}, arr: [ true, 500.33, 'x', [1, 2], {b:true, n: .1, s: '2', a: [1, '1']} ] }; const getFieldHTML = (value, name) => { if (name||name===0) switch (typeof value) { case 'boolean': return '<input type="checkbox" name="${name}" ${value?'checked':''}>\n'; case 'number': return '<input type="number" name="${name}" value="${value}">\n'; case 'string': return '<input type="text" name="${name}" value="${value}">\n'; } return ''; }; const getFieldsHTML = (value, name) => { const fields = []; if (value instanceof Array) fields.push(...value.map((itemValue, i) => getFieldsHTML(itemValue, name+'['+i+']') )); else if (typeof value === "object") fields.push(...Object.keys(value).map(prop => getFieldsHTML( value[prop], //value is an object name?(name+'['+prop+']'):prop ) )); else fields.push(getFieldHTML(value, name)); return fields.join(''); }; const fieldsHTML = getFieldsHTML(json); const frm = document.createElement('form'); frm.enctype = 'application/json'; frm.method = 'POST'; frm.action = 'URL GOES HERE'; frm.innerHTML = fieldsHTML; console.log(fieldsHTML); console.log(frm) })(); 

 Check your browser console to inspect the created form DOM and its children.