JSON/JSONP JavaScript 的问题

Question

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

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

你应该搜索一些食物（比如培根），然后你会得到一些关于它的信息，这些信息显示在 table 中，如下所示：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");

接着是一个函数，我收集数组数据并用行、单元格等格式化我的 table

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

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

但我显然希望这是一个动态解决方案，以便参数更改为用户在搜索字段中写入的任何内容。我该怎么做？我试图获取搜索字段的值并将其添加到 link，但无法真正发挥作用。

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

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

Answer 1

我们首先需要的是当您按下按钮时的提交处理程序：

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

Answer 2

你快要成功了。只需将你的<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 是您的输入元素（不是该元素的加载时间值，正如您目前在 fiddle 中所拥有的那样） , button 是您的按钮元素。

关于您的 fiddle 的一些注释：

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

这是您的 fiddle 实施了我的更改：https://jsfiddle.net/4gt10u2p/2/

JSON/JSONP JavaScript 的问题

JSON/JSONP problems with JavaScript

javascript

json

jsonp