如何让 $.getJSON 在 JSONP 上工作

Question

我知道它看起来很多，但我的问题与单行（粗体）代码有关。我知道我的事件处理程序设置正确。我知道我的 url 应该是现在的样子，除了 ?callback=?部分（我在另一个 post 中读到，通过将它放在传递给 $.getJSON 的 url 的末尾，getJSON 可以使用 JSONP，并且根据他们的 API 页面wiki 使用 JSONP）。我也可以肯定地知道 domMod 函数永远不会运行，甚至它的第一行也不行。所以不要担心我代码的其他部分，如果你能告诉我为什么我的 $.getJSON 没有调用函数，请告诉我，我对这些东西真的很陌生。我得到的错误信息是

wikiViewer.html:1 Refused to execute script from 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=searc…=jordan?callback=jQuery111107644474213011563_1454965359373&_=1454965359374' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

(function(){
var searchBtn = document.getElementById('search');
//var body = document.getElementsByTagName('body')[0];
var input = document.getElementById("input");
var bodyDiv = document.getElementById('bodyDiv')
$(document).ready(function(){
  searchBtn.addEventListener('click', searchWiki);
  function searchWiki(){
    bodyDiv.innerHTML = "";
    var url = 'https:\/\/en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='
    if (input.value === ""){
        return;
    }
    var searchTerm = input.value.replace(/\s/g, '%20');
    url = url + searchTerm + "?callback=?";
    **$.getJSON(url, domMod)**  //change fileName to be whatever we wish to search
      function domMod(json){ //what to do with dom based on json file  NOTE WE NEED TO FIRST CHECK ANDREMOVE PREVIOUS SEARCH CONTENT
        var entry;
        if (!json.hasOwnProperty(query)){
            return;
        }
        if (!json.query.hasOwnProperty(pages)){
            return;
        }
        json = json.query.pages;
        var keys = Object.keys(json);
        var keysLength = keys.length;
        for (var i = 0; i < keysLength; i++){ 
            entry = json[keys[i]];
            var outterDiv = document.createElement('div');
            outterDiv.className = "entry";
            var imageDiv = document.createElement('div');
            imageDiv.className = "entryImg";
            var entryDiv = document.createElement('div');
            entryDiv.className = "entryTxt";
            outterDiv.appendChild(imageDiv);
            outterDiv.appendChild(entryDiv);
            entryDiv.innerHTML = '<h2>' + entry.title + '</h2>' + '<p>' + entry.extract + '</p>'
        if (entry.hasOwnProperty('thumbnail')){ //add image to our imageDiv child of entryDiv
            imageDiv.style.backgroundImage = "url('" + entry.thumbnail.source + "')"
        }
        bodyDiv.appendChild(outterDiv); //appendChild to the Body 
    }
   }
 } 

  });
}())

Answer 1

您已经在 url 中使用 ? 开始了一个查询字符串，但在您这样做时添加了另一个 ?：

url = url + searchTerm + "?callback=?";

改为

url = url + searchTerm + "&callback=?";

发送术语时工作正常 "food"

DEMO

如何让 $.getJSON 在 JSONP 上工作

How do I get $.getJSON to work on JSONP

javascript

ajax

jquery

json

jsonp