We Keep Coding

How to fix ajax issue with not displaying in console?

I have a simple ajax call in my Java spring boot application that calls a method in the controller and then returns the value to the front-end console. However, when I run the code it runs with a status of 400 but it does not show anything in my console. Not sure if I am forgetting anything or I have it setup wrong, but nothing is being passed back I am assuming.
JQuery:
$(".modalPathContentBtn").on("click", function(event) {
getSecondQuery();
});
function getSecondQuery() {
var search2 = {
"dtoTiername" : "Test"
}
$.ajax({
type : "POST",
contentType : 'application/json; charset=utf-8',
dataType : 'json',
url : "/ajax/mqlGetSecondQuery",
data : JSON.stringify(search2),
success : function(result) {
console.log("It works: " + result);
}
});
}
Java:
#RequestMapping(value = "/ajax/mqlGetSecondQuery", method = RequestMethod.POST)
public #ResponseBody String sendSecondQuery(#RequestBody TestApp mTestApp, HttpServletRequest request) {
String pathVal = mTestApp.getDtoTiername();
System.out.println("Test of if it is getting to this part of the code");
return "randomString";
}

You mentioned your request is failing with a status code of 400 which would mean the success of your ajax request would not get called since the request has not succeeded. You need to add a fail handler. It would look something like this.
$.ajax({
type: "POST",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
url: "/ajax/mqlGetSecondQuery",
data: JSON.stringify(search2),
success: function(result) {
console.log("It works: " + result);
},
fail: function(err) {
console.log(err)
}
});
This may not be exact syntax, but the idea here is that you have a fail handler

Getting SyntaxError: missing ; before statement during ajax JQuery Call

Code is:
var rootData = null;
$.ajax({
url: 'http://localhost:12345/request',
data: rootData,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
error: function() { alert('Failed!'); },
success: function() { alert('OK'); }
});
I've got :
"SyntaxError: missing ; before statement"
I don't understand why !

This error might occur when you're not escaping a string properly and the JavaScript engine is expecting the end of your string already.
Check rootData, it might be causing this error. (I'm assuming rootData is set to null then populated with some data before sending the request)

OK I found the solution:
a Rest Server is on port 12345 (Tomcat)
and a Spring MVC server on port 8080 (Tomcat)
the request from MVC is
var treeData = null;
$.ajax({
url: 'http://localhost:12345/request',
data: treeData,
type: 'GET',
async:false,
crossDomain: true,
dataType: 'json',
error: function() { alert('Failed!'); },
success: function( treeData ) { ....
and the rest server must accept the cross domain request just by adding #CrossOrigin to it :
#CrossOrigin(origins = "http://localhost:8080")
#RequestMapping(value = "/request", produces = { MediaType.APPLICATION_JSON_VALUE}, method = RequestMethod.GET)
public String request() { ....

Searching an API using AJAX

I am trying to make an application that allows the user to search through the College Scorecard API. I am very new to ajax so I am not sure what I have done incorrectly here. I have the textAjax() function hooked to a button on my HTML form, but when I run my code, the request fails. Here is my code.
function testAjax(){
$.ajax({
type : 'POST',
url : 'https://api.data.gov/ed/collegescorecard/v1/schools?school.name=University%20of%20Cincinnati&api_key=<API-KEY>',
dataType : 'json',
success : function(data) {
//if the request is successful do something with the data
alert(data);
},
error : function(request){
//if the request fails, log what happened
alert(JSON.stringify("Error: " + request));
}
});
}
function buttonClick() {
var url = testAjax();
}

There is a data attribute for queries to be added to your url so you don't have to do it yourself. Check this out:
function testAjax(){
$.ajax({
type : 'POST',
url : 'https://api.data.gov/ed/collegescorecard/v1/schools',
data: {
'name': 'University of Cincinnati',
'api_key': 'whatever'
},
dataType : 'json',
success : function(data) {
//if the request is successful do something with the data
alert(data);
},
error : function(request){
//if the request fails, log what happened
alert(JSON.stringify("Error: " + request));
}
});
I'm not sure if this is your only problem, but it might help.

How to parse a JSON response as JSONP on a jQuery ajax call?

I'm dealing with the todoist API (https://developer.todoist.com/) and I am making a jquery ajax get request for some data with this:
var url = "https://todoist.com/API/v7/sync";
var data = {
'token' : token,
'resource_types' : '["all"]',
};
$.ajax({
url: url,
data: data,
type: 'GET',
dataType: 'jsonp',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log('error');
},
});
Now, when I get the response, I get the error
Unexpected token :
Why? Because according to (https://stackoverflow.com/a/7941973/2724978) jQuery is expecting a jsonp formatted response, but it returns json.
I've researched all over for how to solve this, and the response would be: "Return the data in jsonp format".. well. It's an external API and they don't provide data in JSONP. Is there a way I could override the returned function and parse this JSON data anyway?

Your dataType should be json, not jsonp.

As elektronik pointed out the dataType should be json and not jsonp. The code than looks as following ...
var token = "your token"
var url = "https://todoist.com/API/v7/sync";
var data = {
'token' : token,
'resource_types' : '["all"]',
};
jQuery.ajax({
url: url,
data: data,
type: 'GET',
dataType: 'json',
success: function(response) {
console.log(response);
},
error: function(response) {
console.log('error');
},
});

AJAX call returning data but failing

I've been trying to make an ajax call to retrieve some data from a database but i don't know why is returning an error.
there's the code
$('#afegir_pagament').submit(function() {
var import_pagament = $('#import_pagament').val();
var id_reserva = $('#id_reserva_hidden').val();
url = "afegir_pagament.php";
data = {import: import_pagament, id_reserva: id_reserva};
$.ajax({
url: url,
dataType: 'application/json',
type: 'post',
data: data,
complete: function(xhr, statusText) {
console.log(xhr.responseText);
},
success: function(responseText) {
$('#pag_import_pagat_propietari').val(responseText.total);
},
error: function(req, status, err) {
alert('Error');
}
});
return false;
});
console.log(xhr.responseText) returns {"total":"230.00"}
ERROR: no conversion from text to application/json
Could somebody help me?

"application/json" is not a valid value for the dataType property. Change it to "json".
See here (comment #7):
Thanks for the report, but this is not a jQuery bug. application/json is not a valid value for the dataType property.

Just change application/json to datatype :"json" and exactly what you trying to do inside the
success function ..if you trying to display this value in your text field just try this..
$("#pag_import_pagat_propietari").attr("#yourid",responseText.total);