We Keep Coding

jQuery ignores HTTP request method and appends weird URL parameters

I have a web service that expects POST requests carrying a JSON string in the body. I'm trying to use this web service using jQuery, but I have two problems :
1) jQuery seems to always use the GET method, no matter what I do ;
2) jQuery seems to append weird things into the URL.
The relevant pice of my code :
var WEB_SERVICE_URL = 'http://localhost/XXXX/';
// ...
$.post({
url: WEB_SERVICE_URL + 'GetConfigLabels/',
contentType: 'application/json; charset=utf-8',
dataType: 'jsonp',
data: JSON.stringify(data),
processData: false,
success: function(response) {
// Whatever
},
error: function(xhr, message) {
// Whatever
}
});
The developper tools of the browser (Firefox Quantum 60.0.2) shows me a weird URL :
http://localhost/XXXX/GetConfigLabels/?callback=jQuery331012146934861340841_1530707758905&{}&_=1530707758906
While the following was expected :
http://localhost/XXXX/GetConfigLabels/
Also the HTML file is openned as a file (using file:///) through the file system, hence the use of JSONP for cross domain.
I failed to find existing questions related to this issue. What could be causing this ? Thank you !

Please refer to the dataType : json section at http://api.jquery.com/jquery.ajax/ :
"json": Evaluates the response as JSON and returns a JavaScript
object. Cross-domain "json" requests that have a callback placeholder,
e.g. ?callback=?, are performed using JSONP unless the request
includes jsonp: false in its request options. The JSON data is parsed
in a strict manner; any malformed JSON is rejected and a parse error
is thrown. As of jQuery 1.9, an empty response is also rejected; the
server should return a response of null or {} instead. (See json.org
for more information on proper JSON format
overrding random name of callback using jsonpCallback :
jsonpCallback Type: String or Function() Specify the callback function
name for a JSONP request. This value will be used instead of the
random name automatically generated by jQuery. It is preferable to let
jQuery generate a unique name as it'll make it easier to manage the
requests and provide callbacks and error handling. You may want to
specify the callback when you want to enable better browser caching of
GET requests. As of jQuery 1.5, you can also use a function for this
setting, in which case the value of jsonpCallback is set to the return
value of that function.

what is the difference between application/json and json only?

I have seen return type json , application/json while working with ajax. I have tried both and found the same result. Please anyone let me know the difference between these two.
datatype: 'json'
datatype: 'application/json'

JQuery's datatype argument on the $.ajax method accepts either the name of a format (like json or xml) which jQuery knows how to parse, or a MIME type (like application/json), which jQuery can map back to a parseable type. In this case, jQuery is mapping application/json to json for you, because it's a common format.
The datatype argument is not what MIME type you expect from the server, but how jquery should parse the response.
The documentation for jQuery.ajax says:
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
The type of data that you're expecting back from the server.
[...]
"json": Evaluates the response as JSON and returns a JavaScript object.

Ajax MVC Partial Returning Correct Response Yet Fires the Error Handler

This has me completely stumped. So odd.
I have this Ajax function defined:
$.ajax({
type: 'GET',
dataType: 'text/HTML',
url: getLicenseeDetailsUrl,
success: function (response) {
$('#licenseeDetails').html('');
$('#licenseeDetails').html(response);
},
error: function (xhr) {
alert('Failed to get licensee details');
}
});
And I have it calling into my controller which has an action like:
public ActionResult LoadLicenseeDetails(long licenseeId)
{
var model = new LicenseeDetailsViewModel();
var licencesee = _licensingRepository.LoadById(licenseeId);
var licenses = _licensingRepository.LoadLicenses(licenseeId);
model.Licencee = Mapper.Map<Licensee, LicenceeViewModel>(licencesee);
model.Licences = Mapper.Map<IEnumerable<License>, IEnumerable<LicenceViewModel>>(licenses);
return this.PartialView("_LicenseeDetails", model);
}
This all seems to be working as expected without any errors, however it ends up firing the Ajax error function, not the success function.
Looking at the xhr.responseText I can see the correct response information from the action controller!!
All with a status 200 OK as well. What on earth am I doing wrong here?

What on earth am I doing wrong here?
this:
dataType: 'text/HTML'
should become:
dataType: 'html'
Quote from the documentation of the dataType parameter:
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
The type of data that you're expecting back from the
server. If none is specified, jQuery will try to infer it based on the
MIME type of the response (an XML MIME type will yield XML, in 1.4
JSON will yield a JavaScript object, in 1.4 script will execute the
script, and anything else will be returned as a string). The available
types (and the result passed as the first argument to your success
callback) are:
"xml": Returns a XML document that can be processed via jQuery.
"html": Returns HTML as plain text; included script tags are
evaluated when inserted in the DOM.
"script": Evaluates the response as JavaScript and returns it as plain text. Disables caching by
appending a query string parameter, "_=[TIMESTAMP]", to the URL unless
the cache option is set to true. Note: This will turn POSTs into GETs
for remote-domain requests.
"json": Evaluates the response as JSON and returns a JavaScript object. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should
return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)
"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.
"text": A plain text string.
multiple, space-separated values: As of jQuery 1.5, jQuery can convert a dataType from what it received in the Content-Type header to what you require. For example, if you want a text response to be treated as XML, use "text xml" for the dataType. You can also make a JSONP request, have it received as text, and interpreted by jQuery as XML: "jsonp text xml." Similarly, a shorthand string such as "jsonp xml" will first attempt to convert from jsonp to xml, and, failing that, convert from jsonp to text, and then from text to xml.
Or even better, simply get rid of this parameter. jQuery is intelligent enough to use the Content-Type response HTTP header set by the server in order to deduce the correct type and process the parameter passed to the success callback.
Look at the Console tab of your javascript debugging toolbar in the browser. It will provide you with more information about the error.

JSON.parse works but jQuery.getJSON returns http error 403

When I use JSON.parse(jsonString), the JSON is parsed no problem at all.
var result = JSON.parse(jsonString);
But when I use jQuery.getJSON(jsonString) i received an http error 403.
var result = jQuery.getJSON(jsonString);
Any idea why one will work and the other will not? They are both reading a string.
Thanks!

They are both reading a string.
Oh no! Those two methods are so very much different. They have absolutely nothing in common. They are accomplishing 2 entirely different tasks.
The first simply parses a JSON string into a javascript object:
var result = JSON.parse('{"foo": "bar"}');
alert(result.foo);
will show bar. Also notice that the JSON.parse method is a built-in method in modern browsers. It's pure javascript and has strictly nothing to do with jQuery. Legacy browsers do not support it. For them you need to include the json2.js script to your page.
The second performs an AJAX call and expects as argument an url:
jQuery.getJSON('/someserversidescript', function(result) {
// callback to be executed when the AJAX request succeeds
});
As you can see here the argument is an url. Calling jQuery.getJSON('{"foo": "bar"}') makes strictly no sense. I guess that's the reason why your server responds with 403 error, since this is not valid url on your server. It expects that the server will return a JSON string as response. It's simply a shorthand for:
$.ajax({
url: '/someserversidescript',
type: 'GET',
dataType: 'json',
success: function(result) {
// callback to be executed when the AJAX request succeeds
}
});

getJSON() is an asynchronous call back to a server that returns a JSON object. JSON.parse() takes a string and returns a JSON object in memory. They are completely different.

Return String from Cross-domain AJAX Request

I'm looking for a way to return a single JSON/JSONP string from a cross-domain "AJAX" request. Rather than request the string and have JQuery return it as a generic object automatically, I want to get a hold of the string BEFORE that conversion happens. The goal here is to parse it myself so I can turn it straight into new objects of a certain type (e.g. a Person object).
So, just to make this clear, I don't want any string-to-generic-object conversion going on behind the scenes and this must work using a different domain.
Here's a non-working example of what I would like to do:
$.ajax({
type: 'GET',
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'text',
success: parseToPerson
});
function parseToPerson( textToParse ) {
// I think I can do this part, I just want to get it working up to this point
}
I'm perfectly happy if JQuery isn't involved in the solution, as long as it works. I would prefer to use JQuery, though. From what I've read, the javascript techniques used to get JSONP data (dynamically creating a script element) would probably work, but I can't seem to get that to work for me. I control the domain that I am requesting data from and I can get the data if I change the dataType in the AJAX call to 'JSONP', so I know that is working.

If your data is being retrieved from another domain, you will need to use JSONP (there are other options, but JSONP is by far the easiest if you control the service). The jQuery call will look like this:
$.ajax({
// type: 'GET', --> this is the default, you don't need this line
url: 'http://www.someOtherDomain.com/GetPerson',
dataType: 'jsonp',
success: parseToPerson
});
The actual request that goes to your service will be http://www.someOtherDomain.com/GetPerson?callback=arbitrary_function_name. On the service side, you will need to return data like this:
arbitrary_function_name("the string (or JSON data) that I want to return");
So you'll need to inspect the querystring parameters, get the value of the callback parameter, and echo it out as if you're calling a Javascript function with that name (which you are), passing in the value you want to provide through the service. Your success function will then get called with the data your service provided.
If you're deserializing the returned data into a Javascript object, you might be better off returning JSON data than a string, so the data your service returns might look like this:
arbitrary_function_name({
"name":"Bob Person",
"age":27,
"etc":"More data"
});
That way you don't have to worry about parsing the string - it'll already be in a Javascript object that's easy to use to initialize your object.

Not sure how this will work in conjuction with jsonp, but maybe converters is what you're looking for?
$.ajax(url, {
dataType: "person",
converters: {
"text person": function(textValue) {
return parseToPerson(textValue);
}
}
});