Javascript 将数据从搜索栏发送到url

我有麻烦了。所以我需要从api获取数据。我有一个搜索栏，用户需要输入搜索栏来查找超级英雄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);
  });
}

var用户输入；
var-url；
var检验；
//https://superheroapi.com/api/10215865526738981
$（文档）.ready（函数（）{
//当用户键入数据并单击按钮时
$（btn1）。单击（函数（）{
//这就是搜索栏所在的位置
userInput=document.getElementById（'mySearch'）.innerHTML；
});
url='1〕https://www.superheroapi.com/api.php/10215865526738981/search/batman“+用户输入；
//这里是say type中的api链接在蝙蝠侠中的位置
//应该会弹出关于蝙蝠侠和
$.getJSON（url、函数（数据）{
var html=''；
$.each（数据、结果、函数（i、演示）{
html+=''+demo.name+''；
//html+=“”+demo.liography.alter-egos+“”；
html+='powerstats'+demo.powerstats.batch+''；
html+='Connections'+demo.Connections.relations+'
'；
html+='appearance'+demo.appearance.gender+'
'；
html+='Work'+demo.Work.base+''；
html+=‘Profile’；
});
$（'#demo'）.html（html）；
});
}

---

搜寻

---

然后在你的api url中使用这个值。

这里有一些有用的东西，你可以用来与你的代码进行比较，并从中获得一些东西。我使用了纯javascript，并留下了一些注释，以便你可以从中学习

最初的问题中几乎没有错误的假设

• 代码在页面加载时执行，未等待用户输入
• url是硬编码的，以蝙蝠侠+用户编写的内容开头

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

我希望这能帮助你解决问题，并且你能学到一些新的东西，帮助你更好地理解javascript。祝你编码愉快

var-button=document.getElementById（'btn1'）；
//当用户点击按钮时，我们想调用函数start search
按钮。addEventListener（'单击'，开始搜索）；
函数startSearch（事件）{
//当我们开始搜索时，我们希望获取值
//来自用户的输入字段
var userInputValue=document.getElementById（'mySearch'）.value；
//这是我们可以添加用户所需内容的基本API url
var urlBase=https://www.superheroapi.com/api.php/10215865526738981/search/'
//若用户并没有在输入中提供名称，我们希望停止执行
if（userInputValue===null | | userInputValue====''）返回；
//如果我们仍然使用此函数，请将用户键入的内容附加到urlBase
var searchUrl=urlBase+userInputValue；
//实际执行远程调用的call函数
performSearch（搜索URL）；
}
函数performSearch（搜索URL）{
//如果您愿意，可以使用jQuery getJSON
//这里是如何通过AJAX调用获取数据的vanila JS解决方案
var requestData=new XMLHttpRequest（）；
//因为AJAX始终是异步的，所以我们需要等待文件加载
//加载后，我们要调用函数handleResults
requestData.addEventListener（'load'，HandlerResults）；
requestData.open（'GET'，searchUrl）；
requestData.send（）；
}
函数handleResults（）{
//一旦我们得到响应，因为我们使用了vanilla JS，我们得到了响应
//在此上下文中可用作“this.response”，但它是字符串类型
//我们需要将该字符串解析为JSON
var responseJSON=JSON.parse（this.response）；
//如果有错误，我们没有找到任何字符
if（responseJSON.error）console.log（'Character not found'）；
否则{
var html=''；
responseJSON.results.forEach（函数（结果）{
html+=''+result.name+''；
//html+=“”+demo.liography.alter-egos+“”；
html+='powerstats'+result.powerstats.batch+''；
html+='Connections'+result.Connections.relatives+'
'；
html+='Appearance'+result.Appearance.gender+'
'；
html+='Work'+result.Work.base+'
'；
//html+=‘Profile’；
})
//这样做是不好的，将html这样注入DOM
//但让我们把这一课留到后面的阶段
//那么，让我们把这个html放到页面上
document.getElementById（'demo'）.innerHTML=html；
}
}

搜寻

几乎没有问题，您正在设置

url

并在文档加载时调用

getJSON

，而不是单击按钮。这会在用户有机会输入内容之前激发对

url

的请求。您需要将其移动到单击处理程序中。而且，

p

元素不应该有其他

p

元素它在Mok中，所以我将其添加到.click事件中，但它如何显示api信息？

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

const value = document.getElementById('mySearch').value;