javascript - 将数据从搜索栏发送到网址

Question

我遇到了麻烦。所以我需要从 api 获取数据。我有一个搜索栏，用户需要输入搜索栏来查找 super 英雄 api。

我如何从搜索栏获取数据并将我的网址全部放入 .click 函数中。

var userInput;
var url;
var test;
//https://superheroapi.com/api/10215865526738981

$(document).ready(function () {
  // when the user types in the data and clicks the button
  $(btn1).click(function () {
    // this is where the search bar is
    userInput = document.getElementById('mySearch').innerHTML;
  });

  url = 'https://www.superheroapi.com/api.php/10215865526738981/search/batman' + userInput;

  // here is where the api link in say type in batman 
  // and is should pop up with info  about batman and

  $.getJSON(url, function (data) {
    var html = '';

    $.each(data.results, function (i, demo) {
      html += '<h2>' + demo.name + '</h2>';
      //html += "<h2>" + demo.biography.alter-egos + "</h2>";
      html += '<h2> Power Stats ' + demo.powerstats.combat + '</h2>';
      html += '<p> Connections ' + demo.connections.relatives + '</p>';
      html += '<p> appearance ' + demo.appearance.gender + '</p>';
      html += '<h2> Work ' + demo.work.base + '</h2>';
      html += ' Profile <img src ' + demo.image.url + '>';
    });

    $('#demo').html(html);
  });
}

---

<p>
  <input type="search" id="mySearch" name="mySearch">
  <button id="btn1">Search</button>
  <p id="demo"></p>
</p>

Answer 1

这里有一些有用的东西，你可以用它来与你的代码进行比较并从中得到一些东西。我使用了普通的 javascript 并留下了评论，以便您可以从中学习。

原题中几乎没有错误的假设。

• 代码在页面加载时执行，没有等待用户输入
• url 被硬编码为以 batman + 用户写的内容开头

下面的代码并不完美，但与原始代码足够接近，应该很容易理解。我也选择不使用 jQuery，但如果需要，您应该可以使用它。只需将 getElementById 替换为 jQuery 选择器并将 XMLHttpRequest 替换为 getJson。

我希望这可以帮助您继续解决您的问题，并且您将能够学到一些新东西，从而帮助您更好地理解 javascript。编码愉快!

var button = document.getElementById('btn1');
// when user clicks on button, we want to call function start search
button.addEventListener('click', startSearch);

function startSearch(event) {
  // when we are starting the search, we want to pick up the value
  // input field from user
  var userInputValue = document.getElementById('mySearch').value;
  // this is base API url on which we can add what user wanted
  var urlBase = 'https://www.superheroapi.com/api.php/10215865526738981/search/'
  // if user did not provide name in input, we want to stop executing
  if (userInputValue === null || userInputValue === '') return;
  // if we are still in this function, append what user typed onto urlBase
  var searchUrl = urlBase + userInputValue;
  // call function which actually executes the remote call 
  performSearch(searchUrl);
}

function performSearch(searchUrl) {
  // this could be jQuery getJSON if you so prefer
  // here it is vanila JS solution of how to get data via AJAX call
  var requestData = new XMLHttpRequest();
  // because AJAX is always async, we need to wait until file is loaded
  // once it is loaded we want to call function handleResults
  requestData.addEventListener('load', handleResults);
  requestData.open('GET', searchUrl);
  requestData.send();
}

function handleResults() {
  // once we get response, because we used vanilla JS, we got response
  // available in this context as "this.response", however it is type string
  // we need to take that string and parse it into JSON
  var responseJSON = JSON.parse(this.response);
  // if there is error, we didn't find any character
  if (responseJSON.error) console.log('Character not found');
  else {
    var html = '';
    responseJSON.results.forEach(function (result)  {
      html += '<h2>' + result.name + '</h2>';
      // html += "<h2>" + demo.biography.alter-egos + "</h2>";
      html += '<h2>Power Stats ' + result.powerstats.combat + '</h2>';
      html += '<p>Connections ' + result.connections.relatives + '</p>';
      html += '<p>Appearance ' + result.appearance.gender + '</p>';
      html += '<p>Work ' + result.work.base + '</p>';
      // html += ' Profile <img src ' + result.image.url + '>';
    })
    // this is bad thing to do, injecting html like that into DOM
    // but let's leave this lesson for later stage
    // so, let's take this html and drop it onto the page
    document.getElementById('demo').innerHTML = html;
  }
}

<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<div id="demo"></div>