javascript - JSONP脚本插入和回调功能的程序协助

标签 javascript jquery callback jsonp

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

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/

最佳答案

首先,您需要更改两件事才能使其在 jsfiddle 中工作:

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

之后,我认为您只需要更改处理返回数据的方式即可。它是一个数组,但您希望使用其缩写来获取一种状态的数据。解决这个问题的一种方法是从数组创建一个 map 对象。

jsfiddle

<小时/>

这是一个将数组转换为 map 对象的函数:

function createStateMap(states) {
    var map = {};
    states.forEach(function(state) {
        map[state.Abbreviation] = state;
    });
    return map;
}
<小时/>

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

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

关于javascript - JSONP脚本插入和回调功能的程序协助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29998668/

相关文章:

javascript - iOS 7 视口(viewport)元标记更改

javascript - 简单ajax和:remote => true In Ruby on Rails的区别

android - 如何使用 Volley 库和 NetworkImageView 在 setImageUrl 上完成回调?

jquery - 自定义复选框在 IE10 中不起作用

jquery - 使用 JQuery 展开/折叠表格行

java - 使用 java 8 进行回调

ios - CADisplayLink 回调是否总是在主线程上运行?

Javascript:参数可以是任何东西吗?

javascript - 具有动态填充和元素计数的 Flexbox 未正确调整大小

javascript - 根据所选选项更改表单的可见性