Question

我是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 */
}

这没有任何作用，你得到的只是一个空数组。为了它的工作，我必须在链接中添加一个参数，比如你添加的培根＆＃34;＆amp; namn = bacon＆＃34;在末尾。所以，如果我改为将src改为： https://webservice.informatik.umu.se/webservice_livsmedel/getlivsmedel.php?callback=getlivsmedel&namn=bacon 然后一切都很好，所有的培根信息都像我想要的那样排列在我的桌子上。

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

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

使用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> - 在函数中添加代码，并在单击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/

JavaScript的JSON / JSONP问题

2 个答案: