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 で応答します。この 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 Migrate 1.1.0 で jQuery 1.9.1 を使用する

注:プロセス全体で 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 に答える