JSONP 脚本插入和回调函数的程序帮助答案

【问题标题】：Program assistance with JSONP Script Insertion and Callback functionJSONP 脚本插入和回调函数的程序帮助
【发布时间】：2015-07-11 23:33:35
【问题描述】：

我在编写将使用 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/

【问题讨论】：

标签： javascript jquery callback jsonp

【解决方案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

【讨论】：

好的，谢谢。这实际上是我第一次使用 jsfiddle 来解决这样的问题。
@RobertCHerrington - 这是我的第一个 jsonp 电话。我删除了显示如何使用 JQuery 执行此操作的答案，因为我认为您真的不想要那样。如果你想看，我可以取消删除。
没关系，谢谢您的帮助！我会做一些比较，看看我第一次应该如何/应该做些什么。