{"id":42041,"date":"2018-11-27T03:01:06","date_gmt":"2018-11-26T17:01:06","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=42041"},"modified":"2018-11-26T12:48:20","modified_gmt":"2018-11-26T02:48:20","slug":"ajax-formdata-javascript-json-parse-and-stringify-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ajax-formdata-javascript-json-parse-and-stringify-primer-tutorial\/","title":{"rendered":"Ajax FormData Javascript JSON Parse and Stringify Primer Tutorial"},"content":{"rendered":"
\"Ajax<\/a>

Ajax FormData Javascript JSON Parse and Stringify Primer Tutorial<\/p><\/div>\n

For the most part, adding onto yesterday’s PHP JSON Decode and Encode Primer Tutorial<\/a> with today’s clientside “Ajax FormData Javascript JSON Parse and Stringify” thinking we could have started afresh with an HTML codebase, except for one thing in the code that is … anyone, anyone<\/a>? … yes, Edgar J Hoover, that would be the “post<\/i><\/b>“, rather than “get” in the codeline<\/i> …<\/p>\n


\nfunction clickit(bois) {
\n if (bois.id == 'ajaxit') {
\n form = new FormData();
\n xhr = new XMLHttpRequest();
\n xhr.onreadystatechange = function() {
\n if (this.readyState == 4 && this.status == 200) {
\n var myobj = JSON.parse(this.responseText);
\n var str=syntaxHighlight(myobj); \/\/JSON.stringify(myobj, null, 2);
\n document.getElementById('result').innerHTML=\\\"<br><br><a target=_blank title=JSON.Stringify href='\/\/www.w3schools.com\/js\/js_json_stringify.asp'>JSON.stringify<\/a>(<a target=_blank title=JSON.Parse href='\/\/www.w3schools.com\/js\/js_json_parse.asp'>JSON.parse<\/a>('\\\" + this.responseText + \\\"')) = <br><br>\\\" + str;
\n console.log(myobj);
\n }
\n };
\n form.append('ajax', 'yes');
\n form.append('injson', document.getElementById('trcontent').innerText);
\n xhr.open('post<\/b>', 'json_code.php', true);<\/i>
\n xhr.setRequestHeader('Cache-Control', 'no-cache');
\n xhr.send(form);
\n } else {
\n document.getElementById('mysubmit').click();
\n }
\n}
\n<\/code><\/p>\n

… the reason for keeping “post” being, purely and simply, and not for functional reasons (though it could be of interest to you that the user cannot know what data was involved by looking at the web browser address bar URL used), that “post” can handle more data than “get” (affecting the web browser address bar URL via those ? and & arguments) can. The upshot, though, is that we stay with a PHP codebase. However, we want you to know, for small amounts of JSON data, you can use …<\/p>\n