Question

假设我想调用以下通过Ajax调用返回Json的url：

http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=renderBasicSearchNarrative&q=westminster+abbey“

如何继续这样做？

我尝试使用像这样的AjaxOptions.Url：

<span id="status">No Status</span>
<div>
     @Ajax.ActionLink("Test", null, null, 
              new AjaxOptions 
              {
                  UpdateTargetId = "status",
                  Url = "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=renderBasicSearchNarrative&q=westminster+abbey"
              })
</div>

但是当我点击“测试”链接时，不会调用url。

我也尝试过：

    <div>
          <button value="get closest POI" onclick="testNominatim()"></button>
    </div>

    <script type="text/javascript">
     function testNominatim() {
            alert("called");
            $.ajax(
                {
type: "GET",
                url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=onGetNominator&q=westminster+abbey",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                failure: function (msg) {
                    alert(msg);
                },
                success: function (msg) {
                    alert(msg);
                }                });

 function onGetNominator(msg) {
        alert(msg);
    }
    </script>

当我点击按钮时，会显示消息框，但不会调用webservice。

我可能错过了一些微不足道的东西，但它是什么？

TIA。

修改1 更改以反映实际脚本。

Answer 1

尝试以下方法：

<div>
    <button onclick="testNominatim()">get closest POI</button>
</div>

<script type="text/javascript">
    function testNominatim() {
        $.ajax({
            type: "GET",
            url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=onGetNominator&q=westminster+abbey",
            dataType: "jsonp"
        });
    }

    function onGetNominator(msg) {
        alert(msg[0].place_id);
    }
</script>

要注意的事项（与原始代码相比）：

dataType: "jsonp"
您不需要成功回调，因为成功回调是您的onGetNominator功能
您不需要contentType: 'applicatin/json'因为您没有发送JSON请求

或者如果您想使用匿名成功回调：

<div>
    <button onclick="testNominatim()">get closest POI</button>
</div>

<script type="text/javascript">
    function testNominatim() {
        $.ajax({
            type: "GET",
            url: "http://open.mapquestapi.com/nominatim/v1/search?format=json&json_callback=?&q=westminster+abbey",
            dataType: "jsonp",
            success: function (msg) {
                alert(msg[0].place_id);
            }
        });
    }
</script>

要注意的事项（与原始代码相比）：

json_callback=?将被jQuery替换，其中随机名称允许调用匿名成功回调
您不再需要onGetNominator功能，因为我们使用匿名成功回调
您不需要contentType: 'applicatin/json'因为您没有发送JSON请求

就Ajax.ActionLink助手而言，我认为它不支持JSONP。

Answer 2

使用第二种形式将是我提出的解决方案。请注意，该服务需要一个名为json_callback的参数，而不是回调函数的标准callback参数。这需要在AJAX调用中进行一些额外的设置。

尝试以下方法。请注意，我已经更改了处理程序以使用代码而不是标记来应用它。这是一个更好的做法。我也在使用jQuery 1.7+。 JSFiddle可以在http://jsfiddle.net/xVBBN/

找到

<div>
    <button>get closest POI</button>
</div>

<script type="text/javascript">
$(function() {
    $('button').on('click',function() {
        alert('called');
        $.ajax({
            type: 'GET',
            url: 'http://open.mapquestapi.com/nominatim/v1/search?format=json&q=windsor+[castle]&addressdetails=1&limit=3&viewbox=-1.99%2C52.02%2C0.78%2C50.94&exclude_place_ids=41697',
            dataType: 'jsonp',
            jsonp: 'json_callback',
            success: function(data) {
                alert(data[0].place_id);
            }
        });
    });
});
</script>

ASP.NET MVC通过AjaxOptions.Url调用webservice

2 个答案: