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

Question

I'm having trouble writing this code that will use JSONP Script Insertion Technique and a Callback Function. 我在编写使用JSONP脚本插入技术和回调函数的代码时遇到了麻烦。 I must use http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt for the URL. 我必须使用http://legacy.jefferson.kctcs.edu/users/mark.prather/states.txt作为URL。 This is a sample of what's on the webpage 这是网页内容的示例

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"},
] );

I must use getStateData(sData) as the name of mycallback and sData is supposed to hold the data for the array. 我必须使用getStateData（sData）作为mycallback的名称，并且sData应该保存数组的数据。 Then I must have a form that allows a user to select a state and get the requested data, which is the State, Abbreviation, Statehood, and Capital. 然后，我必须具有一个表格，该表格允许用户选择一个州并获取所请求的数据，即州，简称，州和首都。 Below is a portion of my form. 以下是我表格的一部分。

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

My largest issue is the fact that the URL is a function already instead of raw data. 我最大的问题是URL已经是一个函数，而不是原始数据。 I'm not looking for handouts, just help. 我不是在寻找讲义，只是在寻求帮助。 This is what I've gotten so far. 这就是我到目前为止所得到的。 Any assistance will be greatly appreciated. 任何帮助将不胜感激。 https://jsfiddle.net/MaNBeAsT515/ppp0dxwm/2/ https://jsfiddle.net/MaNBeAsT515/ppp0dxwm/2/

Answer 1

First there's two things you need to change to get this to work in a jsfiddle: 首先，您需要更改两件事以使其在jsfiddle中起作用：

Since you are calling a service that only supports http, you cannot use a jsfiddle that uses https. 由于您正在调用仅支持http的服务，因此不能使用使用https的jsfiddle。
You need to change the jsfiddle so the JavaScript is in the <head> element. 您需要更改jsfiddle，以便JavaScript位于<head>元素中。 This is because your function needs to be in the global scope since you are calling it from an onclick attribute. 这是因为您的函数需要在全局范围内，因为您是从onclick属性调用它的。

After that, I think you just need to change how you are dealing with the returned data. 在那之后，我认为您只需要更改处理返回数据的方式即可。 It is an array, but you want to get the data for one state using its abbreviation. 它是一个数组，但是您想使用其缩写获取某个状态的数据。 One way to deal with that is to create a map object from the array. 一种解决方法是从数组创建一个地图对象。

jsfiddle 的jsfiddle

Here's a function that converts the array into a map object: 这是一个将数组转换为地图对象的函数：

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

I'm not doing it in the jsfiddle above, but I think you should remove the previously inserted <script> element before creating a new one. 我不在上面的jsfiddle中这样做，但是我认为您应该在创建新元素之前删除先前插入的<script>元素。 You should probably also set the type attribute of the <script> element. 您可能还应该设置<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

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