JSONP 脚本插入和回调函数的程序协助

Question

我在编写将使用 JSONP 脚本插入技术和回调函数的代码时遇到问题。我必须使用 http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt 作为 URL。这是网页上内容的示例

function getStateData( [
{State:"Alabama", Abbreviation:"AL", Statehood:1819, Capital:"Montgomery"},
{State, "Alaska", Abbreviation:"AK", Statehood:1959, Capital:"Juneau"},
{State:"Arizona", Abbreviation:"AZ", Statehood:1912, Capital:"Phoenix"},
] );

我必须使用 getStateData(sData) 作为 mycallback 的名称，sData 应该保存数组的数据。然后我必须有一个表单，允许用户 select 一个状态并获取请求的数据，即状态、缩写、状态和首都。下面是我的表格的一部分。

<form>
    <p>
        <select>
            <option value="AL" selected>Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
        </select>
    </p>
</form>

我最大的问题是 URL 已经是一个函数，而不是原始数据。我不是在寻找讲义，只是帮助。这是我到目前为止所得到的。任何帮助将不胜感激。 https://jsfiddle.net/MaNBeAsT515/ppp0dxwm/2/

Answer 1

首先，您需要更改两件事才能使其在 jsfiddle 中运行：

由于您正在调用仅支持 http 的服务，因此您不能使用使用 https 的 jsfiddle。
您需要更改 jsfiddle，以便 JavaScript 位于 <head> 元素中。这是因为您的函数需要在全局范围内，因为您是从 onclick 属性调用它的。

之后，我认为您只需要更改处理返回数据的方式即可。它是一个数组，但您想使用其缩写获取一个州的数据。处理该问题的一种方法是从数组创建地图对象。

jsfiddle

这是一个将数组转换为地图对象的函数：

function createStateMap(states) {
    var map = {};
    states.forEach(function(state) {
        map[state.Abbreviation] = state;
    });
    return map;
}

我没有在上面的 jsfiddle 中这样做，但我认为您应该在创建新元素之前删除之前插入的 <script> 元素。您可能还应该设置 <script> 元素的 type 属性。

function insertURL() {
    var oldScript = document.getElementById('stateScript');
    if (oldScript) {
        oldScript.parentNode.removeChild(oldScript);
    }

    var url = " http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt"; 
    var newScript = document.createElement('script');
    newScript.setAttribute('id', 'stateScript');                   
    newScript.setAttribute('type', 'text/javascript');                   
    newScript.setAttribute('src', url);                   
    document.getElementsByTagName('head')[0].appendChild(newScript); 
}

jsfiddle

JSONP 脚本插入和回调函数的程序协助

Program assistance with JSONP Script Insertion and Callback function

javascript

jquery

jsonp

callback