jQuery posting JSON

JqueryJsonPost

Jquery Problem Overview


update: I would like to pass the var value to the server

hello, same old, same old ... :)

I have a form called <form id="testForm" action="javascript:test()"> and a code area called <code id="testArea"></code>

I am using this code to stringify and display the data in the code area:

var formData = form2object('testForm');
document.getElementById('testArea').innerHTML = JSON.stringify(formData, null, '\t');
var value = JSON.stringify(formData, null, '\t');

What I want is to send this data to a JSON file. I've been working on this project : http://ridegrab.com/profile_old/ and if you press Submit Query button you will see the head of the page populate.

Also I want use this piece of script to send data:

    function authenticate(userName, password) {
    $.ajax
    ({
        type: "POST",
        //the url where you want to sent the userName and password to
		url: 'username:password@link to the server/update',
        dataType: 'json',
        async: false,
        //json object to sent to the authentication url
        data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
        success: function () {
			
		alert("Thanks!"); 
        }
    })
}

Again, all I want is to be able to send that JSON data to the server. My server is set up to update or POST the data in the right place.

Jquery Solutions


Solution 1 - Jquery

You post JSON like this

$.ajax(url, {
    data : JSON.stringify(myJSObject),
    contentType : 'application/json',
    type : 'POST',
    ...

if you pass an object as settings.data jQuery will convert it to query parameters and by default send with the data type application/x-www-form-urlencoded; charset=UTF-8, probably not what you want

Solution 2 - Jquery

'data' should be a stringified JavaScript object:

data: JSON.stringify({ "userName": userName, "password" : password })

To send your formData, pass it to stringify:

data: JSON.stringify(formData)

Some servers also require the application/json content type header:

contentType: 'application/json'

There's also a more detailed answer to a similar question here: https://stackoverflow.com/questions/6323338/jquery-ajax-posting-json-to-webservice

Solution 3 - Jquery

In case you are sending this post request to a cross domain, you should check out this link.

https://stackoverflow.com/a/1320708/969984

Your server is not accepting the cross site post request. So the server configuration needs to be changed to allow cross site requests.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPatrioticcowView Question on Stackoverflow
Solution 1 - JqueryteknopaulView Answer on Stackoverflow
Solution 2 - JqueryKyle WildView Answer on Stackoverflow
Solution 3 - Jquerynizam.spView Answer on Stackoverflow