I am calling an ASP.net application that has an exposed JSON web service interface. If I access the web service using Fiddler, everything works correctly and I get my desired result. I am trying to do the same thing using JQuery and I am running into issues. I will try to provide as much information as possible but not too much as to cloud the issue.
In Fiddler, I am using Request builder and sending a POST with the following information:
http://www.XXXXXXXXXX.com/TASService.svc/Logon
If I use Fiddler the request is sent as follows:
POST http://www.XXXXXXXXXX.com/TASService.svc/Logon HTTP/1.1
content-type: application/json
Host: www.XXXXXXXXXX.com
Content-Length: 50
{"Email":"[email protected]","Password":"#password1"}
As a result I get:
HTTP/1.1 200 OK
Date: 2011年12月29日 21:36:09 GMT
Server: Microsoft-IIS/6.0
MicrosoftOfficeWebServer: 5.0_Pub
X-Powered-By: ASP.NET
X-AspNet-Version: 4.0.30319
Content-Length: 38
Cache-Control: private
Content-Type: application/json; charset=utf-8
{"ContactID":52215,"Status":"Success"}
This is a good response (successful logon)
My HTML/JQuery is defined as follows:
<html>
<head>
<title>jQuery Test JSON</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "POST",
url: "http://www.XXXXXXXXXX.com/TASService.svc/Logon",
data: "{'Email':'[email protected]', 'Password':'#password1'}",
contentType: "application/json; charset=utf-8",
dataType: "jsonp",
success: function(msg) {
$('#msgid').html(msg.d);
},
error: function (errormessage) {
$('#msgid').html("oops got an error!");
}
});
});
</script>
JSON Test Web Page
<div id="msgid">
</div>
</body>
</html>
Now when I call run the page in FireFox I get the following (FireBug):
"NetworkError: 405 Method Not Allowed - http://www.XXXXXXXXXX.com/TASService.svc/Logon?callback=jQuery171018036323126084708_1325195152450&{%27Email%27:%[email protected]%27,%20%27Password%27:%27#password1%27}&_=1325195152469"
When I view what was sent (Fiddler RAW), I get the following:
GET http://www.XXXXXXXXXX.com/TASService.svc/Logon?callback=jQuery171026545743770048436_1325195246881&{%27Email%27:%[email protected]%27,%20%27Password%27:%27 HTTP/1.1
Host: www.XXXXXXXXXX.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
Accept: */*
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
Pragma: no-cache
Cache-Control: no-cache
What I notice right away is that it is sending a GET rather than a POST, although I specified a POST on the ajax request. I believe this is why I am getting the 405 error. However, am not sure why it is doing a GET rather than a POST.
Any assistance on this will be very appreciated since time is running short on my project.
1 Answer 1
jQuery won't send jsonp as POST: http://www.markhneedham.com/blog/2009/08/27/jquery-post-jsonp-and-cross-domain-requests/ and http://devlog.info/2010/03/10/cross-domain-ajax/ show why.
If you're on the same domain as the web service use datatype: 'json' not datatype: 'jsonp'
WebMethods via jQuery.