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应该保存数组的数据。 然后，我必须具有一个表格，该表格允许用户选择一个州并获取所请求的数据，即州，简称，州和首都。 以下是我表格的一部分。

<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脚本插入和回调功能的程序帮助

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-02 06:18:31

JSONP脚本插入和回调功能的程序帮助

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-02 06:18:31

解决方案1
1 已采纳 2015-05-02 06:18:31