Question

我正在尝试找到一种更有效的方法来更改我通过html下拉列表解析的XML文档的来源。目前，我正在使用XMLHttpRequest（），但我知道ajax会更有效。我已多次尝试合并ajax，但对代码的编辑似乎永远不会起作用。我的源代码如下。

    var baseURL = "";
    var xml, bb;

    function hl(src) {
        'use strict';
        return hljs.highlight('javascript', src).value;
    }

    function load(kind) {
        'use strict';
        var xhReq = new XMLHttpRequest();
        var url;
        switch (kind) {
            case 'sean': url = baseURL + 'source/sean.xml';
                break;
            case 'bruce': url = baseURL + 'source/bruce.xml';
                break;
            case 'victoria': url = baseURL + 'source/victoria.xml';
                break;
            case 'chris': url = baseURL + 'source/chris.xml';
                    break;
        }
        xhReq.open('GET', url, false);
        xhReq.send(null);
        var xml = xhReq.responseText;
        xml = xml.replace(/\t/g, '  ');
        clearAll();
        document.getElementById('xml').value = xml;
        convert();
    }

    function clearAll() {
        clearXML();
        clearJSON();
    }

    function clearXML() {
        document.getElementById('xml').value = '';
    }

    function clearJSON() {
        $('.testData').empty();
        bb = null;
    }

    function convert() {
        clearJSON();
        xml = document.getElementById('xml').value;
        bb = jsonTest(xml); <!-- External Parsing Source from XML to JSON -->
        console.log(bb.data.json());
    }

这是HTML：

    div class="block-section" id="convert">
        <p>
            <textarea id="xml"></textarea>
        </p>
        <ul class="list-unstyled list-inline">
            <li class="dropdown">
                <button data-toggle="dropdown" class="dropdown-toggle btn btn-default" id="ccda-menu" aria-expanded="true">
                    <span>Example</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="ccda-menu">
                    <li>
                        <a onclick="load('sean')">Sean</a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li>
                        <a onclick="load('Bruce')">Bruce</a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li>
                        <a onclick="load('victoria')" class="ccda-load">Victoria</a>
                    </li>
                    <li role="presentation" class="divider"></li>
                    <li>
                        <a onclick="load('chris')">Chris</a>
                    </li>
                </ul>
            </li>
            <li>
                <button onclick="convert()" class="btn btn-default convert">Convert</button>
            </li>
            <li>
                <button onclick="clearAll()" class="btn btn-default clear">Clear</button>
            </li>
        </ul>
    </div>

编辑------这是我用的旧代码，我无法使用源代码开关

window.YC = window.YC || {};
YC.get_data = function () {
    'use strict';

    var dfd = $.Deferred();

    $.ajax({
        url: 'source/sean.xml',
        type: 'get',
        dataType: 'text'
    })
        .fail(fail)
        .success(extractData);

    function extractData(summary) {
     var bb = jsonTest(summary);
     window.d = bb.data;
    }

然后我会返回dfd承诺并解决失败问题。

Answer 1

保留您拥有的案例结构，然后使用jQuery.get()代替XMLHttpRequest，并且它可以正常工作。总是适合我。

Ajax更改URL源onClick

1 个答案: