Question

我正在尝试将我的文本输入用作字符串变量，并将该变量用作URL的一部分来提取JSON数据，但我似乎无法让它正常工作。

我不知道我是否错误地设置了变量，但我们将不胜感激。谢谢！

$(document).ready(function() {
    var p = document.querySelector('p');
    var input = document.getElementById('search').value;
    $("#go").click(function() { 
        if (input === '') {
            p.style.backgroundColor = 'transparent';
            p.classList.add = 'hide';
            p.innerHTML = '';
        } else {
            $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + input + "&callback=?", function(data) {
                p.innerHTML = "<br> Click the links below";
                p.classList.remove('hide');
                var i = 0
                for (i; i < 5; i++){
                    if (data[3][i] !== undefined){
                        p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>' 
                    } else {
                        p.innerHTML = ' <h2> No matching result </h2>';
                    }
                }
            });
        }
    });
});

Answer 1

在您分配变量值时，它是空的，因为它是在加载站点时运行的，并且搜索框中可能还没有文本。您希望单击#go时的内容，因此只需将其分配到click事件处理程序中：

$(document).ready(function() {
var p = document.querySelector('p');
// the text field value is empty at this point

$("#go").click(function() { 
  // this is run when user clicks #go
  var input = document.getElementById('search').value;
  if (input === '') {
    p.style.backgroundColor = 'transparent';
    p.classList.add = 'hide';
    p.innerHTML = '';
  }
  else {
  // encode user input
  $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=5&search=" + encodeURIComponent(input) + "&callback=?", function(data) {
    p.innerHTML = "<br> Click the links below";
    p.classList.remove('hide');
    var i = 0
    for (i; i < 5; i++){
      if (data[3][i] !== undefined){
      p.innerHTML += '<h2> <a href ="' + data[3][i] + '" target = "_blank">' + data[1][i] + '<br>' + '<h3>' + data[2][i] + '</h3>' + '</h2>' 
    }

    else {
      p.innerHTML = ' <h2> No matching result </h2>';

    }
    }
  });
  }
});
});

此外，如果将用户输入包含在URI中，则应始终对其进行编码。否则，在搜索框中使用任何非字母数字字符（包括空格）时，您将遇到意外行为。有关如何以及原因的更详细说明，请参阅documentation。

在Javascript中将文本输入设置为变量

1 个答案: