我在编写使用 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 中工作:
- 由于您正在调用仅支持http的服务,因此您无法使用使用https的jsfiddle。
- 您需要更改 jsfiddle,以便 JavaScript 位于
<head>
中元素。这是因为您的函数需要位于全局范围内,因为您是从onclick
调用它的。属性。
之后,我认为您只需要更改处理返回数据的方式即可。它是一个数组,但您希望使用其缩写来获取一种状态的数据。解决这个问题的一种方法是从数组创建一个 map 对象。
<小时/>这是一个将数组转换为 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);
}
关于javascript - JSONP脚本插入和回调功能的程序协助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29998668/