使用 JQuery 调用 JSON Web 服务答案

【问题标题】：Calling JSON Web Service using JQuery使用 JQuery 调用 JSON Web 服务
【发布时间】：2011-12-29 22:05:01
【问题描述】：

我正在调用具有公开 JSON Web 服务接口的 ASP.net 应用程序。如果我使用 Fiddler 访问 Web 服务，一切正常，我得到了我想要的结果。我正在尝试使用 JQuery 做同样的事情，但我遇到了问题。我会尽量提供尽可能多的信息，但不会过多以掩盖问题。

在 Fiddler 中，我正在使用请求生成器并发送包含以下信息的 POST：

http://www.XXXXXXXXXX.com/TASService.svc/Logon

如果我使用 Fiddler，请求发送如下：

POST http://www.XXXXXXXXXX.com/TASService.svc/Logon HTTP/1.1
content-type: application/json
Host: www.XXXXXXXXXX.com
Content-Length: 50

{"Email":"XXXXXXXXXX@hotmail.com","Password":"#password1"}

结果我得到：

HTTP/1.1 200 OK
Date: Thu, 29 Dec 2011 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"}

这是一个很好的回应（成功登录）

我的 HTML/JQuery 定义如下：

<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':'XXXXXXXXXX@hotmail.com', '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>

现在，当我在 FireFox 中调用运行页面时，我得到以下信息（FireBug）：

"NetworkError: 405 Method Not Allowed - http://www.XXXXXXXXXX.com/TASService.svc/Logon?callback=jQuery171018036323126084708_1325195152450&{%27Email%27:%27XXXXXXXXXX@hotmail.com%27,%20%27Password%27:%27#password1%27}&_=1325195152469"

当我查看发送的内容 (Fiddler RAW) 时，我得到以下信息：

GET http://www.XXXXXXXXXX.com/TASService.svc/Logon?callback=jQuery171026545743770048436_1325195246881&{%27Email%27:%27XXXXXXXXXX@hotmail.com%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

我立即注意到它发送的是 GET 而不是 POST，尽管我在 ajax 请求上指定了 POST。我相信这就是我收到 405 错误的原因。但是，我不确定为什么它会执行 GET 而不是 POST。

由于我的项目时间紧迫，因此我们将非常感谢您提供任何帮助。

【问题讨论】：

我相信您只能在跨域请求上使用 GET，我看到您正在使用 JSONP 并进行 POST。如果是本地的，请尝试使用 JSON 而不是 JSONP
您可以尝试删除数据参数周围的双引号吗？它应该期待一个对象，而不是字符串（或评估字符串）。
@Ivan ASP.NET Web 服务在通过 jQuery 调用 WebMethods 时确实需要字符串化数据。

标签： jquery asp.net ajax web-services

【解决方案1】：

jQuery 不会将 jsonp 作为 POST 发送：http://www.markhneedham.com/blog/2009/08/27/jquery-post-jsonp-and-cross-domain-requests/ 和 http://devlog.info/2010/03/10/cross-domain-ajax/ 说明原因。

如果您与 Web 服务位于同一域中，请使用 datatype: 'json' 而不是 datatype: 'jsonp'

【讨论】：