0

我有一个通过调用以下函数显示 DIV 的超链接：

<div id="btn" onclick="showUI()">I'm a button</div>
<div id="panel" style="display: none">I'm hidden initially.</div>
<script>
function showUI(element) {
    $('#panel').html('Loading...');
    $('#panel').show();
    var content = api_call();
    $('#panel').html(content);
    return false;
}
function api_call() {
    $.ajax({
        type: 'POST',
        url: 'ajax/myAPI/',
        async: false,
        data: {q: 'fetch_sth_great', id: 1, token: '123456'},
        success: function(data, status, xhr) {
            return data;
        }
    }).fail(function(xhr, status) {
        if (status == "error") {
            return "Sorry but there was an error: " + xhr.status + " " + xhr.statusText;
        }
    });
}
</script>

在 Google Chrome 的开发控制台中，AJAX 调用以结构良好的 XML 响应，其中包含我想在 DIV 中显示的内容$('#panel')和 status 200 OK。但是，该函数api_call()返回undefined.

但是，当我将以下代码用于另一个 API 调用时，DIV 已成功填充数据。

$('#panel').load('ajax/myAPI/', {q: 'fetch_sth_great', id: id, token: '123456'}, function(response, status, xhr) {
        if (status == "error") {
            var msg = "Sorry but there was an error: ";
            $("#panel").html(msg + xhr.status + " " + xhr.statusText);
        }
    });

我正在尝试通过 onclick 函数从我的 API 中获取内容（返回有效的 XML / HTML 内容），并将其显示在特定的 DIV 中。但在显示响应内容之前，我必须在其前后添加更多内容。因此，我不能使用$.load()方法。

我在上面的代码中错过了什么？

将 jQuery 1.9.1 与 jQuery Migrate 1.1.0 一起使用

注意：整个过程中没有 JavaScript 或服务器端错误。

更新： XML 返回的示例 XML 内容

<?xml version="1.0" encoding="utf-8" ?>
<response>
  <ui><![CDATA[some html here]]></ui>
</response>

我想获取xpath的内容：/response/ui

4

1 回答 1

1

我会这样做

<div id="btn" onclick="showUI()">I'm a button</div>
<div id="panel" style="display: none">I'm hidden initially.</div>
<script>
function showUI(element) {
    $('#panel').html('Loading...');
    $('#panel').show();
    api_call(function(content){
            //Note: Content would be the XML returned from the AJAX call
            // So traversing to find the data required would need to be done here
            // Something like:
            var exValue = $(content).find('node').text();
            $('#panel').html(exValue);
        });

    return false;
}
function api_call(successCallback) {
    $.ajax({
        type: 'POST',
        url: 'ajax/myAPI/',
        async: false,
        data: {q: 'fetch_sth_great', id: 1, token: '123456'},
        success: function(data, status, xhr) {
            successCallBack(data);
        }
    }).fail(function(xhr, status) {
        if (status == "error") {
            return "Sorry but there was an error: " + xhr.status + " " + xhr.statusText;
        }
    });
}
</script>
于 2013-03-18T10:15:53.740 回答