Javascript 维基百科API沙箱，按用户搜索'；s输入_Javascript_Jquery_Json_Jsonp

Javascript 维基百科API沙箱，按用户搜索'；s输入

javascript jquery json

Javascript 维基百科API沙箱，按用户搜索'；s输入,javascript,jquery,json,jsonp,Javascript,Jquery,Json,Jsonp,试图通过用户的输入在Wikipedia中搜索，但由于某些原因它不起作用。首先，我认为这可能是由于跨域问题。但是，ajax应该能帮上忙这是代码笔：这是我的HTML: <script src="https://use.fontawesome.com/43f8201759.js"> </script> <body> <h2 class="headertext">WIKIPEDIA <br> VIEWER </h2>

试图通过用户的输入在Wikipedia中搜索，但由于某些原因它不起作用。首先，我认为这可能是由于跨域问题。但是，ajax应该能帮上忙

这是代码笔：

这是我的HTML:

<script src="https://use.fontawesome.com/43f8201759.js">
</script>


<body>

  <h2 class="headertext">WIKIPEDIA  <br> VIEWER </h2>


  <div class="row">
    <div class="col-10-md">

      <input class="searchRequest blink_me" id="cursor" type="text" placeholder="__"></input>

    </div>

    <div class="searchIcon col-2-md"> </div>
  </div>

<div>
  <p class=results></p>
</div>


</body>


维基百科
查看器

这是我的jQuery:

$(document).ready(function() {

  var icon = "<i class='fa fa-search fa-2x'></i>";

  $('#cursor').on("keydown", function() {
    $(this).removeClass("blink_me");
    var searchIcon = $(".searchIcon");

    searchIcon.empty();
    if ($(".searchRequest").val().length > 0) {
      searchIcon.append(icon);
    }






    searchIcon.on("click", function() {
console.log("clicked!");


      var search = $(".searchRequest").val();

      var url = "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=" + search + "&format=json&callback=?";  

      $.ajax({
        dataType: "jsonp",
        url: url,
        success: function(data) {
          $(".results").html(data[0]);

          console.log(data[0]);
             }

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

$（文档）.ready（函数（）{
var图标=”；
$（'#cursor'）。在（“keydown”，function（）上）{
$（this.removeClass（“blink_me”）；
var searchIcon=$（“.searchIcon”）；
searchIcon.empty（）；
if（$（“.searchRequest”）.val（）.length>0）{
searchIcon.append（图标）；
}
searchIcon.on（“单击”，函数（）{
log（“单击！”）；
var search=$（“.searchRequest”）.val（）；
变量url=”https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=“+search+”&format=json&callback=？”；
$.ajax({
数据类型：“jsonp”，
url:url，
成功：功能（数据）{
$（“.results”）.html（数据[0]）；
console.log（数据[0]）；
}
});
});
});
});

我做错了什么？请帮助。

您的js加载顺序有错误

data

对象包含索引为2的数组中的结果文本，我假设这是您想要显示的，请将其更改为

$(".results").html(data[2]);

您可以在此处检查原始代码的修改版本

有点错误，$（“.results”）.html（[2]），但我明白了。必须是$（“.results”）.html（数据[2]。非常感谢！我忘了按保存按钮，现在应该可以了。您能进一步建议我如何获得显示在页面上的所有10个结果吗？我想我必须为每个结果使用它吗？是的，您可以使用$.each（结果，函数（I，v）{/*添加代码以添加每个结果*/}）；取决于您希望如何显示它们。谢谢日志。非常感谢！