JavaScript 的 JSON/JSONP 问题答案

【问题标题】：JSON/JSONP problems with JavaScriptJavaScript 的 JSON/JSONP 问题
【发布时间】：2015-06-16 13:21:21
【问题描述】：

我是 JSON/JSONP 的新手，我遇到了一些问题并对它有一些疑问。基本上我需要从一些 JSON 数据中获取：

https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getLivsmedel

你应该搜索一些食物（比如培根），然后你会得到一些关于它的信息，这些信息显示在如下表格中：https://jsfiddle.net/4gt10u2p/1/

所以我从创建一个脚本元素开始，然后像这样将它附加到正文：

var script = document.createElement('script');
var scriptSrc = script.src = *link above*

document.querySelector('body').appendChild(script);
var tableBody = document.querySelector("tbody");

接下来是一个函数，我收集数组数据并用行、单元格等格式化表格。

function getLivsmedel(data) {
      for (var i = 0; i < data.livsmedel.length; i++) {  
      /* some stuff going on here */
}

这什么也没做，你得到的只是一个空数组。为了让它工作，我必须在链接中添加一个参数，比如对于培根，你在末尾添加“&namn=bacon”。因此，如果我将 src 更改为此： https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getlivsmedel&namn=bacon 然后一切都很好，所有的培根信息都像我想要的那样排列在我的桌子上。

但我显然希望这是一个动态解决方案，以便参数更改为用户在搜索字段中写入的任何内容。我如何使它工作？我已尝试获取搜索字段的值并将其添加到链接中，但无法真正使其正常工作。

另外，另一个问题是当页面加载时函数会立即执行，这是为什么呢？我希望它在您按下搜索按钮时运行，带有事件监听器或类似的。

使用 javaScript 执行此操作，而不使用 jquery 等。

【问题讨论】：

"我尝试获取搜索字段的值并将其添加到链接中，但无法真正发挥作用。" 这是 100%正确的做法。你应该专注于完成这个。但是，在您显示您已经尝试过的相关代码之前，我们无法帮助您执行此操作。请注意，每个新的 JSONP 请求都需要创建一个新的 <script> 元素。
您好，非常感谢您的回复。我在 jsfiddle 中添加了我的 JS 代码，其中包含一些关于我在做什么的简短 cmets。

标签： javascript json jsonp

【解决方案1】：

你几乎拥有它。只需将您的<script>-adding 代码封装在一个函数中，并在您单击Search 按钮时调用它：

function doJSONP() {
    var script = document.createElement('script');
    var scriptSrc = script.src = 'https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getLivsmedel&namn=' + search.value;

    document.querySelector('body').appendChild(script);
}

button.addEventListener("click", function() { doJSONP(); });

这假定 search 是您的输入元素（不是该元素的加载时间值，正如您目前在小提琴中所拥有的那样），button 是您的按钮元素。

你的小提琴上只有几个音符：

您需要在 JSFiddle 中使用 window.getLivsmedel = function(data) { 而不是 function getLivsmedel(data) {，因为小提琴的脚本代码不在全局范围内运行。 JSONP 要求函数在全局范围内可见。（这在 JSFiddle 之外的普通网页上不是问题。）
您的getLivsmedel 函数似乎不起作用：您的HTML 中似乎没有tbody。但是，这是一个完全不同的问题（并且可能很容易解决），并且与您的 JSONP 问题无关。

这是我实施的更改的小提琴：https://jsfiddle.net/4gt10u2p/2/

【讨论】：

哦，我明白了！现在似乎可以正常工作了，非常感谢！

【解决方案2】：

我们需要的第一件事是当您按下按钮时的提交处理程序：

function submit() {
    var searchbox = $("input#searchbox").val();
    var script = document.createElement('script');
    script.src = "https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getlivsmedel&namn=" + searchbox 
    document.querySelector('body').appendChild(script);
}

所以现在每次按下提交时，都会为搜索词加载一个新的 JSONP 对象。从这里您需要使回调函数正常工作，例如，每当搜索一种新类型的食物时，旧的 JSONP 对象和数据都会被删除并替换为新的。

Here is an old SO question about JSONP with a full example for a solution

【讨论】：