Question

我目前正在学习有关Udemy的JavaScript课程，而且我被困在一个项目上已经有几个星期了，我已经尽我所能来尽我所能，但我似乎缺少了一个至关重要的部分，正在停止显示对象的项目表单。

当您将自己喜欢的鸡尾酒提交到表单中时，此项目的目的是显示鸡尾酒饮料和成分。我有四个JavaScript文件app.js，这是JS代码的主要部分，然后CocktailAPI.js，该类包含一个处理API查询的类，然后，我们有UI.js，这是用于界面行为的，最后我有一部分尚未到达的是COcktailDB.js。

我面临的问题是我已经创建了处理API请求的类，而辅导老师首先将其转换为json，然后将响应转换为对象，然后将该对象记录在控制台日志中以证明所有内容工作正常。我面临的问题是，即使我已经复制了导师，该对象也不会显示在控制台上，并且我收到一条错误消息，内容为：

访问CORS策略已阻止从源“空”获取“ http://www.thecocktaildb.com/api/json/v1/1/search.php?s=vodka”处的访问：请求的资源上不存在“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”以在禁用CORS的情况下获取资源。

我已经多次检查了该URL，甚至复制并粘贴了该URL以消除该问题，我之前已经解决了此问题，但是由于遇到另一个问题并且尽管再次启动将解决该问题，所以最终再次启动了该项目。但是，当我再次达到这一点时，由于尝试了很多事情，我不知道该如何解决这个问题。

由于目前尚有2个文件正在使用中，因为我还很早进入项目，所以2个文件上都没有任何内容，所以我只会发布2个js文件。如果还不够，请告诉我我需要添加的内容。

app.js

//Instanciate the classes
const ui = new UI(),
  cocktail = new CocktailAPI();


//Create the event listeners
function eventListeners() {
  //Add event listeners when the form is submittted
  const searchForm = document.querySelector('#search-form');
  if (searchForm) {
    searchForm.addEventListener('submit', getCocktails);
  }
}

eventListeners();


//Get cocktail function
function getCocktails(e) {
  e.preventDefault();

  const searchTerm = document.querySelector('#search').value;

  //Check something is on the search input
  if (searchTerm === '') {
    ui.printMessage('Please add something intot the form', 'danger');
  } else {
    //Query by name of the drink
    cocktail.getDrinkByName(searchTerm)
      .then(cocktails => {
        console.log(cocktails);
      })
  }
}

Cocktail.js

class UI {
  //Display a custom message
  printMessage(message, className) {
    const div = document.createElement('div');

    //Add the HTML
    div.innerHTML = `
          <div class="alert alert-dismissable alert-${className}">
          <button type="button" class="close" data-dismiss="alert">X</button>
          ${message}
          </div>
      `;

    //Insert befrore
    const reference = document.querySelector('.jumbotron h1');
    const parentNode = reference.parentElement;
    parentNode.insertBefore(div, reference);

    //Remove after 3 seconds
    setTimeout(() => {
      document.querySelector('.alert').remove();
    }, 3000);

  }
}

cocktailAPI.js

class CocktailAPI {
  //Get recipe by name
  async getDrinkByName(name) {

    //Search by name
    const apiResponse = await fetch(`http://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);

    //returns json respnse
    cocktails = await apiResponse.json();

    return {
      cocktails
    }
  }
}

当您加载所有文件时，可能会更清楚我要生成的内容

我知道这可能还不够，但是如果您问我，我将能够进行详细解释，但是该代码旨在在控制台日志中显示具有所有属性的API响应

我将复制代码，以便任何人希望文件本身更深入地查看时可以查看它。

Answer 1

之所以发生这种情况，是因为您正在使用http与API通信。如果您将http://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}更改为https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}（ 注意https ），它将为您工作。

class CocktailAPI {
  //Get recipe by name
  async getDrinkByName(name) {
    try {
      //Search by name
      const apiResponse = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);
      //returns json respnse
      let cocktails = await apiResponse.json();
      return { cocktails };
    } catch (err) {
      throw err;
    }
  }
}

let cocktails_api = new CocktailAPI();

cocktails_api
  .getDrinkByName("vodka")
  .then(vodka => { console.log(vodka) })
  .catch(err => { console.log("ERR", err) });

Answer 2

您对JSON数据的请求必须通过LinkedList<Edge> edgeList = new LinkedList(); public Graph createCityGraph(File f) throws FileNotFoundException, IOException { ArrayList<String> cityNames = new ArrayList(); BufferedReader br = new BufferedReader(new FileReader(f)); String st; while ((st = br.readLine()) != null) { cityNames.add(st); } ArrayList<City> cities = new ArrayList(); for (int i = 0; i < cityNames.size(); i++) { City newCity = new City(cityNames.get(i)); cities.add(newCity); } Graph gf = new Graph(cities); for (int i = 0; i < cities.size(); i++) { if (i % 2 == 0) { int weight = createRandomKm(); gf.addEdge(cities.get(i), cities.get(i + 1), weight); gf.addEdge(cities.get(i + 1), cities.get(i), weight); } } return gf; } public int createRandomKm() { int km = (int) (Math.random() * (1000 - 80)) + 80; // between the range [80-1000] return km; } static class Graph { HashMap<City, LinkedList<City>> adjList = new HashMap(); HashMap<City, Integer> edges = new HashMap<>(); HashMap<Edge, Integer> edgeList = new HashMap(); int index = -1; public Graph() { } public Graph(ArrayList<City> vertices) { for (int i = 0; i < vertices.size(); i++) { City vertex = vertices.get(i); LinkedList<City> list = new LinkedList<>(); adjList.put(vertex, list); edges.put(vertex, ++index); } } public void addEdge(City source, City destination, int weight) { Edge edge = new Edge(source, destination, weight); //add forward edge LinkedList<City> list; list = adjList.get(edge.source); list.addFirst(edge.destination); adjList.put(edge.source, list); }而不是https://进行服务，因为http://很可能添加了Access-Control-Allow-Origin通配符，该通配符仅接受thecocktaildb.com请求而不是他们的response header中有https个请求。

只需将获取请求中的http替换为http，如下所示：

https

检查并运行以下代码片段以获取上述示例：

fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);

如何在Javascript上显示对象

2 个答案: