I'm wrapping up some values to send back to an ASP.NET MVC controller action. I'm getting Invalid JSON primitive exceptions, but I'm using JSON.stringify and am confused.
I build up a search value holding called searchValues. Putting console.log(JSON.stringify({ "values": searchValues })); in my code and opening Chrome's console outputs the following
{"values":["name_last:foo"]}
I use the exact some bit of code sans the console.log usage to populate the data parameter to the ajax call. However, watching the call in Fiddler, the request being sent looks like such
0=%7B&1=%22&2=v&3=a&4=l&5=u&6=e&7=s&8=%22&9=%3A&10=%5B&11=%22&12=n&13=a&14=m&15=e&16=_&17=l&18=a&19=s&20=t&21=%3A&22=f&23=o&24=o&25=%22&26=%5D&27=%7D
I'm using this in a Kendo grid but am specifying it to be sent as post as such:
$("#search-preview").kendoGrid({
columns: ...column stuff...,
dataSource: {
transport: {
read: {
url: "/SearchPreview",
dataType: "json",
data: JSON.stringify({"values": searchValues}),
type: "POST",
contentType: "application/json; charset=utf-8"
}
}
}
});
And I can see in Fiddler it being sent in the request body and not being appended to the URL such as if it were a GET. What's going on here?
Edit:
Adding what the entire Fiddler request looks like:
POST http://localhost/MvcTestBed/SearchPreview HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 149
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://localhost
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.106 Safari/537.36
Content-Type: application/json; charset=UTF-8
Referer: http://localhost/MvcTestBed
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: .... asp.net cookie fluff ....
0=%7B&1=%22&2=v&3=a&4=l&5=u&6=e&7=s&8=%22&9=%3A&10=%5B&11=%22&12=n&13=a&14=m&15=e&16=_&17=l&18=a&19=s&20=t&21=%3A&22=f&23=o&24=o&25=%22&26=%5D&27=%7D
Edit 2:
I've experimented with the processData and traditional settings on the jQuery ajax constructor, and the best I've gotten is for the post body to now look like
[object Object]
Based on the results you're getting in fiddler, it looks like something is calling $.param on your json string. jQuery does not do that, so it must be kendo grid.
One solution would be to make the ajax request directly, then in the success initialize the grid with the result.
After some research my solutions is use read as a function:
$("#search-preview").kendoGrid({
columns: ...column stuff...,
dataSource: {
transport: {
read: function (options) {
url: "/SearchPreview",
dataType: "json",
data: JSON.stringify({"values": searchValues}),
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
}
}
}
});
Related
I have an ASP.NET/MVC site calling into WebApi webservices, using JQuery's $.ajax(). Most of these have been working fine, but I have one for which none of the callback functions - done(), fail(), always() - are being called.
The service is being called, and according to Fiddler, a response is being returned. But JQuery isn't calling any of the callback functions.
Other are working fine. Or seem to be.
The calling code is the same, in every case:
core.callService = function (serviceUrl, httpType, token, data, failMessage, callback)
{
try
{
var parameters = {
type: httpType,
dataType: "json",
timeout: ajaxRequestTimeoutMS,
headers: { "authenticationToken": "" + token }
};
if (httpType === "POST" || httpType === "PUT" || httpType === "DELETE")
{
parameters.contentType = "application/json; charset=utf-8";
parameters.data = JSON.stringify(data);
}
else
{
parameters.data = data;
}
debugger;
$.ajax(serviceUrl, parameters).done(
function (result, textStatus, jqXHR)
{
debugger;
// ...
}).fail(function (jqXHR, textStatus, errorThrown)
{
debugger;
// ...
}).always(function ()
{
debugger;
//whether success or failure
});
}
catch (e)
{
debugger;
callback({
success: false,
message: e.message,
data: null
});
}
finally
{
debugger;
}
};
Running Fiddler, I can see the request:
GET http://localhost:52057/api/MyController/myAction?myParameters HTTP/1.1
authenticationToken: eb76272e-b26e-4773-9d22-2218bea8beb1
Accept: application/json, text/javascript, */*; q=0.01
Referer: http://localhost:61986/Feedback?items%5B0%5D.updatetype=
Accept-Language: en-US
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: localhost:52057
DNT: 1
Connection: Keep-Alive
Cookie: ...
And the response:
HTTP/1.1 200 OK
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json; charset=utf-8
Expires: -1
Server: Microsoft-IIS/8.0
X-AspNet-Version: 4.0.30319
X-SourceFiles: =?UTF-8?B?RTpcZGV2XFplYnVcWmVidV93ZWJcdHJ1bmtcWmVidV93c1xhcGlcRW1haWxUb29sXHNlbmRFbWFpbA==?=
X-Powered-By: ASP.NET
Date: Mon, 30 Mar 2015 16:43:32 GMT
Content-Length: 21
{"message":"Success"}
So the response is getting back to the client, but JQuery is not calling the done() function, or the fail() function, or the always() function. And I can't see why. I've looked at the responses from other webservices, that are working, and I can't see anything different about them.
Any ideas?
=============Followup=============
More information, and more confusion.
If I call the webservice during the page init function, the callback is executed. If I call it from within the click event of a button, it does not.
Looking at the requests and responses, the only difference I see is in the referer field of the request. When I'm calling from the event function, I'm seeing "?items[0].updatetype=" appended to the URL. And I can't see find who's doing that.
OK, this one is just stupid. After hours of digging through the JavaScript and monitoring the network traffic trying to figure out why the callback functions weren't executing...
The click event that called my webservice was being generated by a submit button.
Argh!
I have this javascript function that I use in an MVC project. It's been working fine, no code has changed, other than some nuget packages have been updated since the last time I tested it (not sure which ones). Now suddenly I'm getting a parse error. The parameter being passed is simply 'indoor' or 'outdoor', and just to make sure that had nothing to do with the issue, I hard-coded it instead of passing it, both with and without the JSON.stringify to see if that mattered, which it didn't. Any ideas why this is suddenly breaking?
function LoadHobbies(category) {
var data = {
type: category
};
return $.ajax({
type: 'post',
contentType: 'application/json; charset=utf-8',
url: '/Hobby/LoadHobbies',
dataType: 'json',
data: JSON.stringify(data)
});
}
Remote Address:[::1]:9925
Request URL:http://localhost:9925/Hobby/LoadHobbies
Request Method:POST
Status Code:302 Found
Request Headersview source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:17
Content-Type:application/json; charset=UTF-8
Host:localhost:9925
Origin:http://localhost:9925
Referer:http://localhost:9925/Account/Index
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payloadview source
{type: "indoor"}
type: "indoor"
Response Headersview source
Cache-Control:private
Content-Length:162
Content-Type:text/html; charset=utf-8
Date:Sat, 10 Jan 2015 01:28:13 GMT
Location:/Login/Index?ReturnUrl=%2fHobby%2fLoadHobbies
Server:Microsoft-IIS/8.0
X-AspNet-Version:4.0.30319
X-AspNetMvc-Version:5.2
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?RDpcVXNlcnNcQW5kcmV3XERvY3VtZW50c1xjb2RlXEhvYmJ5TWF0cml4U29sdXRpb25NVkNcSG9iYnlNYXRyaXhXZWJcSG9iYnlcTG9hZEhvYmJpZXM=?=
Sorry, I'm a moron. I had added a global authentication check a while back, and forgot to put an [AllowAnonymous] attribute on this controller. So I was right about it not reaching the breakpoint, and you were right about the redirect. Sorry I wasted everyone's time.
Thanks,
Andrew
I have a HighCharts client whose responsibility is to load data from a webservice and show a chart. The function that requests data looks as below:
function requestData() {
$.ajax({
url: 'http://myhost.com/type?x=1&y=2&z=3',
headers: {
Accept : "application/json"
},
type: "GET",
dataType: "json",
success: function(data) {
//do something
},
cache: true
});
}
(in the future, the url property will be dynamically generated)
The target webservice is read-only and implemented using Flask microframework: its purpose is to return JSON data to the HighCharts client. This is the Flask view (function) taking care of data requests:
#app.route('/<type>')
def get_data(type):
x = request.args.get('x','')
y = request.args.get('y','')
z = request.args.get('z','')
[...]
Problem: when I execute the javascript code in Chrome, the following HTTP request is sent to the webservice:
GET /type?x=1&y=2&z=3 HTTP/1.1 // '&' have been escaped to '&'
Host: myhost.com
Connection: keep-alive
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.64 Safari/537.11
Accept: application/json
Referer: http://myhost.com/chart.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3
...I get a 404 status code (Bad Request) from the server, which is perfectly good and expected whenever one or more of the request's query parameters is null or malformed:
HTTP/1.0 400 BAD REQUEST
Content-Type: text/html; charset=utf-8
Content-Length: 16
Server: Werkzeug/0.8.3 Python/2.7.3
Date: Wed, 14 Nov 2012 10:23:49 GMT
After debugging on my Flask webservice I noticed that only the x query parameter (which please note is the first given in the HTTP request) is correctly parsed, while y and z are empy strings, which causes the 404.
Why is it happening? Any charset inconsistency regarding the & -> & escaping?
Thanks, any hint would be of real help (just ask if you need more specs or code)
I think the error is as you expected the escaped ampersand.
Try this:
function requestData() {
$.ajax({
url: 'http://myhost.com/type',
headers: {
Accept : "application/json"
},
data: {
x: 1,
y: 2,
z: 3
},
type: "GET",
dataType: "json",
success: function(data) {
//do something
},
cache: true
});
}
I'm developing an app using HTML5 with jQuery, and I am using Sync Framework for the synchronization and it consumes a service in the cloud (Windows Azure).
The problem is when I send the Request frame to the service:
$.ajax({
dataType: "json",
Accept: 'application / json',
url: serviceUri,
crossDomain: true,
success: function (json) {
console.log(" reponse :" + json);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("error :" + XMLHttpRequest.responseText);
}
});
The Request frame is:
GET http://157.56.8.203/DefaultScopeSyncService.svc/defaultscope /DownloadChanges?id=7AE7C771-0A98-4A5D-A046-430DDB0A7917 HTTP/1.1
Host: 157.56.8.203
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0
Accept: application/json, text/javascript, /
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: htp://localhost:49427/ListSample.htm
Origin: htp://localhost:49427
And the Reply is:
HTTP/1.1 200 OK
Content-Length: 1388
Content-Type: application/json
Server: Microsoft-IIS/7.0
SyncServiceVersion: 1.0
X-Powered-By: ASP.NET
Date: Wed, 30 Nov 2011 11:55:25 GMT
{"d":{"_sync":{"moreChangesAvailable":false,"serverBlob":"AAEAAAD/////AQAAAAAAAAAMAgAAAGVNaWNyb3NvZnQuU3luY2hyb25pemF0aW9uLlNlcnZpY2VzLCBWZXJzaW9uPTQuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49ODk4NDVkY2Q4MDgwY2M5MQUBAAAAK01pY3Jvc29mdC5TeW5jaHJvbml6YXRpb24uU2VydmljZXMuU3luY0Jsb2IFAAAAIDxDbGllbnRLbm93bGVkZ2U+a19fQmFja2luZ0ZpZWxkIDxDbGllbnRTY29wZU5hbWU+a19fQmFja2luZ0ZpZWxkHDxJc0xhc3RCYXRjaD5rX19CYWNraW5nRmllbGQaPEJhdGNoQ29kZT5rX19CYWNraW5nRmllbGQaPE5leHRCYXRjaD5rX19CYWNraW5nRmllbGQHAQADAwIBbVN5c3RlbS5OdWxsYWJsZWAxW1tTeXN0ZW0uR3VpZCwgbXNjb3JsaWIsIFZlcnNpb249NC4wLjAuMCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj1iNzdhNWM1NjE5MzRlMDg5XV1tU3lzdGVtLk51bGxhYmxlYDFbW1N5c3RlbS5HdWlkLCBtc2NvcmxpYiwgVmVyc2lvbj00LjAuMC4wLCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPWI3N2E1YzU2MTkzNGUwODldXQIAAAAJAwAAAAYEAAAAJDhhMzZhNGYyLTg5ZjQtNDJkMi1iNDhmLTJiNWM4ZDc5ZGE4OQEKCg8DAAAAkAAAAAIAAAAFAAAAAAAAAAEAAAAAAAAABQAAEAAAAAKKNqTyifRC0rSPK1yNedqJ6MOD+NOvRl6RwtFgNGnbbgAAABgAABABKAIAAAEAAAAVAAAAAgAAAAEAAAAAAAAAAQAAAAEAAAABAAAAAAAAAQ8AAAAXAAAAAQAAABYAAAABAAMAAAAAAQAAAAAAAAAZAQAAAAAL"},"results":[{"Id":"7ae7c771-0a98-4a5d-a046-430ddb0a7917","Name":"Santiago","Surname":"Dalto","BirthDate":"/Date(917913600000)/","Gender":"M","_metadata":{"uri":"http://157.56.8.203/DefaultScopeSyncService.svc/Persons(Id=guid'7ae7c771-0a98-4a5d-a046-430ddb0a7917')","type":"DefaultScope.Persons"}}]}}
The "data" object in the script is always null, but the reply frame has the correct data.
Can somebody help me?
You must write the call function with this code, the reponse data you can get with json.d.results if the response has more than one object if you will get single object than you reach them with json.d[0].
$.ajax({
dataType: "json",
Accept: 'application / json',
url: serviceUri,
crossDomain: true,
success: function (json) {
if (json.d.results == undefined)
{
// to do
}
else {
console.log(" response :" + json.d.results);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("error :" + XMLHttpRequest.responseText);
}
});
Best Regards.
Cross domain requests doesn't allowing in ALL modern browsers and it is not good to use them. In any case if you would like to receive your data you need to user your server like proxy, so it will work like this:
You implement request from server (YOUR SERVER) to another server
You call request to YOUR server, not to another (cross domain server)
Other ways is hucking.
I.e. you can use this link (BUT I don't suggest it) http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/
I am trying to call a web service from an ajax jquery. It is successfully entering the success method but unfortunately a 403 error is being triggered and thus won't allow me to access the data.
This is my code:
try {
$.ajax({
type: "POST",
url: urlAddress,
data: dataa,
contentType: "text/xml; charset=utf-8",
success: function(Msg) {
// $("#Result").text(msg.d);
alert("ok");
alert("hi "+Msg.responseText + " How are you?");
},
error: function(request, status, error) {
alert("Error "+request.statusText.toString());
alert("ERROR");
}
});
}
catch (e)
{}
Msg.ResponseText comes back "undefined"
From Live Http Headers I get the following:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset:
ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115 Connection: keep-alive
Origin: null
Access-Control-Request-Method: POST
HTTP/1.1 403 Forbidden
Content-Length:1758
Content-Type: text/html
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
Date: Tue, 27 Jul 2010 10:59:04 GMT
Smells like urlAddress is not located on the same domain you're running that script.
That would breach the same origin policy and therefore, fail.
If I'm wrong here with that assumption, your're webservice might require a login (username+password) which you might missing to pass through .ajax().