Posting a JSon object to Webservice via AJAX - javascript

I'm trying to send an object in JSon format to my Java backend by AJAX, but I was unsuccessful.
I wonder if the syntax is properly correct.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="scripts/jquery.min.js.download"></script>
<script src="scripts/jquery.imagemapster.js.download"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var myJSon = {"name":"Jo","age":30,"city":"Ny"};
$.ajax({
type: "POST",
url: 'http://localhost:8080/Servidor/server',
//contentType: "application/json;charset=utf-8",
dataType: "json",
data: JSON.stringify(myJSon),
success: function (data){
alert('Sucess');
},
error: function () {
alert('Error');
}
});
});
});
</script>
</head>
<body>
<button>Send an HTTP POST request to a page and get the result back</button>
</body>
</html>
When the line contentType: "application/json;charset=utf-8" is not commented out, I get the following error in the backend: INFO: Could not find grammar element for class java.lang.String
Is the syntax correct? Can the error be from the backend itself?
P.S.: Sorry for my bad english

Your code is good, you just misspelled "success" on the AJAX call (you need 2 letter c's instead of 1). So replace sucess: function(data){...} with success: function(data){...} https://jsfiddle.net/stephentillman/aow5pah2/

Related

Javascript url load and retrieve parameters - No 'Access-Control-Allow-Origin' header is present error

I have a requirement to fetch parameters from URL response. when I call the URL from the browser I get the following response
Request : http:///api/mail_ru/scan.json?api_key=SgJEE8ZMUmpJ66lLfKTjxpbcsdI3cIml&domain=
Response : {"status":"started","uid":"9aa342-91ca-4d8d-90cf-941c38a7"}
Now I have to call the URL using javascript and retrieve only uid value. I'm using below code but getting following error. Please help.
The error is: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
The code is as follows...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.ajax({
type: 'GET',
url: 'http://<Actual URL>/api/mail_ru/scan.json?api_key=SgJEE8ZMUmpJ66lLfKTjxpbcsdI3cIml&domain=<search URL>,
cache: false,
contentType: "application/json; charset=utf-8",
dataType: 'json',
crossDomain: true,
success: function(data) {
var outputuid = data.uid;
alert(outputuid);
},
error: function(data) { alert("Failed"); },
});
</script>
</head>
<body>
<div id="div1" hidden="true"> </div>
<p>Name: <input type="text" id="URL" value=""></p>
<button>Get External Content</button>
</body>
</html>
I have this code in an HTML file and I'm executing it from different browsers and getting the same error. I browsed about this error and it says, it is related to CORS but didn't mention what piece of code need to be added to the above-mentioned code.
try this code
<script>
jQuery(function() {
// Hook the button click
jQuery("#theButton").click(function() {
$.ajax({
url:"http:///api/mail_ru/scan.json?api_key=SgJEE8ZMUmpJ66lLfKTjxpbcsdI3cIml&domain=",
success:function(response){
jQuery(response. uid).appendTo(document.body);
}
})
});
});
</script>

AJAX problems with sending POST, and getting result

Im new at JS and JSON. So I need to send a JSON massive to Google API using POST, and get the answer and show it via alert. I wrote this page, but this code has no result.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Redericting</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
type: "POST",
url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=KEY',
data: '{wifiAccessPoints:["macAddress", "signalStrength"], cellTowers:["cellId", "locationAreaCode", "mobileCountryCode", "mobileNetworkCode"]}',
dataType: "json",
success: function(response) {
alert(response);
}
});
</script>
</body>
</html>
When using AJAX you require to set the content-type of the information you are sending. By default this value is set to application/x-www-form-urlencoded; charset=UTF-8.
$.ajax({
type: "POST",
url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=KEY',
data: JSON.stringify({wifiAccessPoints:["macAddress", "signalStrength"], cellTowers:["cellId", "locationAreaCode", "mobileCountryCode", "mobileNetworkCode"]}),
contentType: "json",
success: function(response) {
alert(response);
}
});
Are you sending the response in JSON format? datatype property refers to the type that you're returning from the server. And if that doesn't match, control will go the error callback. Remove or update the datatype property to match the response type. Make the below changes and try
$.ajax({
type: "POST",
url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=KEY',
data: '{wifiAccessPoints:["macAddress", "signalStrength"], cellTowers:["cellId", "locationAreaCode", "mobileCountryCode", "mobileNetworkCode"]}',
success: function(response) {
alert(response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error");
}
});

Get backend response to ajax dialogbox fails

I have implemented ajax function inside java script function as follows
<script type="text/javascript">
function subscriptionLookup() {
$.ajax({
url:'deleteApplication?appId=9',
data: json,
type: "POST",
success: function (response) {
showMessageDialogBox(response);
},
error: function(response) {
showMessageDialogBox(response);
}
});
}
</script>
Then I call this javascript function as follows
<a href="javascript:subscriptionLookup();" data-toggle="modal" data-target="#confirm-delete" href="#" >[Delete]</a>
But it gives nothing for me. I found , this call comes inside javascript function but not going into ajax function.
What is the problem with this
Well, firstly, there is a problem with your code itself. You wrote data: json
In this place, you are supposed to pass information that you want to send to your server. If you want to send the word 'json', you might want to use quotes (just like you did with URL).
If you want to specify the data type that you want to recieve from the server, then you should remove this and instead add dataType: 'json' .
I hope the answer will be helpful.
You have few issue in your code. Check the modifications made.
<a data-toggle="modal" data-target="#confirm-delete" href="#" id='xxxxy' >[Delete]</a>
<script type="text/javascript">
$(document).ready(function(){
$('#xxxxy').on('click',function(){
subscriptionLookup();
});
function subscriptionLookup() {
$.ajax({
url:'deleteApplication?appId=9',
dataType: 'json',
type: "POST",
success: function (response) {
showMessageDialogBox(response);
},
error: function(response) {
showMessageDialogBox(response);
}
});
}
});
</script>

Jquery Unable to make Ajax Request to Server

I am trying to make an AJAX Request through JQuery
The below is my code .
But when i debugged through Mozilla Firebug i observed that ,there is no Request hitting to the Server .
Could anybody please tell me where i am doing wrong .
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Example</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'ajax/balances',
processData: false,
timeout: 10000,
type: "POST",
contentType: "application/xml",
dataType: "json",
data: '<MyReq user="' + User + '" katha="' + ivalitiKatha + '" />',
success: function(data) {
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
});
</script>
</body>
</html>
This is my web.xml on server side
<servlet-mapping>
<servlet-name>Jersey Web Application</servlet-name>
<url-pattern>/ajax/*</url-pattern>
</servlet-mapping>
Maybe adding <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> to the head instead of the body helps!
First of all I would recommend moving the CDN JQuery into the head section of the website.
Secondly I have tested the code above and the issue looks to lie with the (data) you are posting in the JSON / AJAX request.
If you remove it or amend to JSON the request returns a result e.g.
$.ajax({
url: 'test',
processData: false,
timeout: 10000,
type: "POST",
contentType: "application/json",
dataType: "json",
data: '{"foo": "bar"}',
success: function(data) {
alert('Success');
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});​
You will need to format the data as a JSON request
data: '{"foo": "bar"}',
Hope this helps

Issue with AJAX and jQuery

<html>
<head>
<title>Ajax</title>
<script type="text/JavaScript" src="jquery-1.5.1.min.js"></script>
<script type="text/JavaScript">
function register()
{
$.ajax({
type: "GET",
url: "http://exampleurl.com/api/index.php",
data: "action=login_user&app_key=MyAPIKey&username=Bob&password=HisPassword",
dataType: "text",
success: function(data)
{
alert(data);
}
error: function (jqXHR, textStatus, errorThrown)
{
alert(errorThrown);
}
});
}
</script>
</head>
<body>
<form>
<input type="button" value="Test" onclick="register()"/>
</form>
</body>
</html>
The URL returns a string (plain-text) when used in the address bar. Why is the above code not working? When I click on the button, I get no alert. Basically, nothing happens.
Browsers tried: IE 8 and Chrome.
Thank you for your time.
There's probably an exception being thrown in the $.ajax call.
Consider
ensuring your URI is well formed by taking the query parameters out of the URL and supplying a data object instead:
data: {
action: login_user,
app_key: ....
etc
}
adding an error handler too
Is example.com the URL of your local site? If not, your above example violates Same Origin Policy. You can circumvent this by doing the call through a proxy on the server side.
Try to add
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
http://api.jquery.com/jQuery.ajax/
Have you tried to separate the data ?
$.ajax({
type: "GET",
url: "http://exampleurl.com/api/index.php",
data: "action=login_user&app_key=MyAPIKey&username=Bob&password=BobPassword",
dataType: "text",
success: function(data) {
alert(data);
}
});
Do you have access over the backend url?
You might need to declare the contentType. You might also need to do a post and set the data.
data: "{ 'action': 'login_user', 'app_key': 'MyAppKey', etc. }"

Categories