We Keep Coding

How to push a JSON to a webservice using Ajax

I have a form on my HTML page with some fields to be filled and an option to upload a file. My Javascript function converts the inputs to the fom into a json file. I am trying to push this generated json along with the file uploaded by the user to a webservice but I am getting an error which says
405 OPTIONS
Here's the Ajax function I wrote. The formData.serializeObject() function gives me the Json output to the form.
$(function() {
$('form').submit(function() {
($('#file')[0].files[0].name);
var formData = new FormData($("form")[0]);
formData.append("filename", $('#file')[0].files[0].name);
var obj = new FormData();
form = form
$.ajax({
url: "Webserviceurl:port/function_to_send_json",
type: "POST",
data: JSON.stringify(formData.serializeObject()),
dataType: "json",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
success: function(data) {
$.ajax({
url: "Webserviceurl:port/function_to_send_file",
type: "POST",
data: obj,
contentType: false,
success: function(data) {
},
error: function(data) {
console.log("Error Happened");
}
});
return false;
},
error: function(data) {
console.log("Error Happened");
}
});
})
});
What could I be doing wrong here?

The error message is being reported because you are making a preflighted request. This means the browser is sending an OPTIONS request asking for permission to make a POST request.
The server is responding to the OPTIONS request with a 405 error meaning "You can't make an OPTIONS request to this URL!"
That said …
data: JSON.stringify(…),
If you are sending JSON then you should say you are sending JSON, which ha a content type of application/json, not:
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
There is no serializeObject method on formData objects, so formData.serializeObject() should be throwing an exception.
This question covers how to upload files with Ajax.

Making a AJAX request with jquery and parsing JSON

EDIT- I have figured out that the request is working correctly but I don't know what to do with the data once it has been retrieved from the server. I don't know how to access the JSON, how do I do this?
I am trying to do a jQuery AJAX request and parse the JSON which is hopefully received. Here is my code:
search.onsubmit = function() {
$.getJSON("http://www.geocodefarm.com/api/forward/json/d4abb1b19adb13e42eac5a7beac6f4dbeb4b4ba4/" + searchBox.value, function(data) {
var rawJSON = $.parseJSON(data);
alert(rawJSON.COORDINATES.latitude);
});
alert("test");
}
I known that the getJSON function is not working because the test alert appears. Why does it not work?

You can do it like so:
sendAjax: function (url, dataObj) {
$.ajax({
url: url,
type: "POST",
data: JSON.stringify(dataObj),
contentType: "application/json; charset=utf-8",
timeout: 30000,
success: function (result) {
//do shit..
}
,
error: function (result) {
}
});
}

Populate a html div with json data received from a server

I need to have a html div populated with the json data received from the server which is a json-rpc server and it retruns an application/jsson-rpc content type and i can see the result in the chrome and firefox dev tools... I need to view it as part of the page inside a given div
i have this script to populate the mybox div but it gives nothing
var returnedinfo;
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});
I also tied having the populating function outside the ajax block when the request is done
request.done(function(msg) {
$("#mybox").text(msg);
});
This just return an empty array like this
[object Object]
and nothing else help will be appreciated.

you need to append the key of the json item.
$("#mybox").html(json.key);

Add dataType to your ajax request.
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});

try this my working example
look contentType and html function to replace html of mybox element
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
url: 'url',
success: function (dataRes) {
$('#mybox').html(dataRes);
},
error: function(a,b,c) {
}
});
Note that in this case dataRes in success function is an html string like <strong>test</strong>. If your server side function returns a json object you should add dataType: 'json' to ajax request and then you can use properties of dataRes object like here $('#mybox').html(dataRes.property1);

AJAX is not sending request

I have the following code:
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert(JSON.stringify($(this).serializeArray()));
var url='http://127.0.0.1:1337/receive';
$.ajax({
url: url,
type: 'POST',
contentType:'application/json',
data: JSON.stringify($(this).serializeArray()),
dataType:'json'
});
});
And after I submit the form, I get a JavaScript alert with the json string, so that is made correct (on my server I only log it so it does not matter what it is in it). If I try to send a request to the same link from postman it works, it logs it.
I think I'm doing something wrong in the ajax call, but I am not able to figure out.

Try below piece of code. Add success and error handler for more details
$("form").submit(function()
{
//Checking data here:
$("input").each(function(i, obj)
{
});
alert(JSON.stringify($(this).serializeArray()));
var url='http://127.0.0.1:1337/receive';
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify($(this).serializeArray()),
dataType:'json',
success : function(response) {
alert("success");
},
error: function (xhr, status, error) {
alert(error);
}
});
});

data:{ list : JSON.stringify($(this).serializeArray())}

From the Jquery docs:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
crossDomain attribute simply force the request to be cross-domain. dataType is jsonp and there is a parameter added to the url.
$.ajax({
url:'http://127.0.0.1:1337/receive',
data:{ apikey: 'secret-key-or-any-other-parameter-in-json-format' },
dataType:'jsonp',
crossDomain: 'true',
success:function (data) {alert(data.first_name);}
});

POST a JSON data on a Server URL using Javascript

I have prepared a JSON data and I need to post it on the server so that a service can be called. URL to the server is available and I am making an AJAX call for the same to
POST the data.
But I dont know where to place the JSON string that is generated.
My Code is as Follows:
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
dataType: 'xml',
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}
I want to post JSON data to the server URL. any Parameters to be used?
Thanks,
Ankit.

You should pass the values with data parameter $.ajax() jquery doc link
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
contentType:"application/json; charset=utf-8",
dataType:"json"
data: JSONData
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}

You are missing the data parameter. Moreover you need to send json data so dataType parameter should be set to json. Below is an Example
function postJSONData(JSONData, localMode)
{
var localJSONData = JSONData;
var postMode = localMode;
$.ajax({
data: localJSONData,
type: 'POST',
url: 'https://tt.s2.com/tmobile/subscribe-service/uid=ankit_bharat_tanna',
dataType: 'json',
success: function(data){
alert("SECOND POST JSON DATA");
} // Success Function
}); // AJAX Call
alert("POST JSON ------------> "+localJSONData +" "+postMode);
}