Ajax调用web服务调用错误：未定义答案

【问题标题】：Ajax call web service call error: undefinedAjax调用web服务调用错误：未定义
【发布时间】：2013-06-27 05:22:12
【问题描述】：

我被一个简单的问题困住了，我想让一个 ajax 调用一个公共 Web 服务，但得到了“未定义”错误

<script type="text/javascript">
     $(document).ready(function () {
         $('#btn1').click(myFunction);
     });
     function myFunction() {
         var strSearch = $('#txt1').val();
         var parameters = "{'passage':'" + strSearch + "'}";
         $.ajax({
             url: 'http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=' + strSearch + '&options=include-passage-references=true',
             type: 'GET',
             data: parameters,
             dataType: "json",
             success: function(result) {
                 $('#res1').html(result.data);
             },
             error: function (xhr) {
                 alert(xhr.data);
             }
         });
     }
</script>

公共服务位于http://www.esvapi.org/api。我相信它使用 'GET' 方法。

调试快照：

【问题讨论】：

请查看JavaScript error console 并告诉您在那里看到的错误以及它们指向的行。
什么未定义的错误？跨域资源共享错误？
同源策略错误，你不能使用ajax从跨域站点获取内容，除非它们支持JSONP或CORS。
我不确定他们是否支持 JSONP。在这种情况下，我该怎么办？
您需要从您的网络服务器查询 API，并使用 ajax 在您的服务器上运行脚本等。或者...您始终可以使用 YQL 之类的东西。

标签： asp.net-mvc jquery asp.net-mvc-4

【解决方案1】：

恐怕您的代码由于相同的域策略将永远无法工作（可以将信息发送到任何来源，但从违反此策略的来源接收信息是无效的）。

如果 API 不提供 jsonp 版本，您需要对您网站上的页面执行 ajax 请求，并使用此页面中包含的服务器端逻辑访问 api。

您网站上的此页面将是与此外部服务通信的代理。

这将是您在服务器端需要的示例方法

public string GetPassage(string passage)
{
    using (var c = new System.Net.WebClient())
    {
        string url = "http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=' + strSearch + '&options=include-passage-references=true";
        return c.DownloadString(Server.UrlDecode(url));               
    }
}

不要直接调用 API，而是在您的页面上调用此操作方法。注意passage是参数

【讨论】：

任何例子，谢谢。
@Love：你用的是什么服务器端技术？
asp.net mvc 4，我用的是c#。最初我确实想在服务器端实现它。但是要传递的参数来自客户端文本框。

【解决方案2】：

您可能会遇到跨源资源共享错误。出于安全目的，您不得进行跨域 AJAX。看到这个帖子：Cross-Origin Resource Sharing (CORS) - am I missing something here?

你有两个选择：

使用JSONP，但必须得到服务器的支持。
或者您可以在浏览器中禁用 CORS，然后尝试运行此代码，它会起作用。有关在 chrome 中禁用 cors 的信息，请参阅此帖子：

Disable same origin policy in Chrome

【讨论】：