时间戳

首页 > 解决方案 > 根据下拉选择检索数据

javascript - 根据下拉选择检索数据

问题描述

我正在开发一个从 API 生成问题的琐事应用程序。我希望生成的问题是单击获取问题按钮后选择的类别/难度。现在它在页面加载时在控制台上生成随机问题。我不清楚我要去哪里错了？

到目前为止，我的代码是这样的：

const score = document.querySelector('#score');
const output = document.querySelector('#output');
const answerSelect = document.querySelector('#selAnswers');
const btn = document.querySelector('#btn');

const categories = [ 
  'Sports',
  'Art',
  'Vehicles',
  'History'
];

const difficulty = [ 
  'easy',
  'medium',
  'hard'
];

btn.addEventListener('submit', function(e) {
        e.preventDefault();

});

document.addEventListener('DOMContentLoaded', function() {
  
  let categorySelect = document.querySelector('#category');
  let difficultySelect = document.querySelector('#difficulty');

  let html = '';
  for (let item of categories) {
    // Appending Strings created using Template literals
    html += `<option>${item}</option>`;
  }
  categorySelect.innerHTML = html;
  
  for (let item of difficulty) {
    let opt = document.createElement('option');
    
    // <option> will use its .textContent as value if not explicitly defined
    opt.textContent = item;
    
    difficultySelect.append(opt);
  }
});

  $.ajax ({
    url: 'https://opentdb.com/api.php?amount=10', 
    data: '{}',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data.results[0]);
        
        
        data.items.forEach(function(item){


            //console.log(item);

            let output = getOutput(item);
            //Display Results

            result.innerHTML += output;
        });

    },
    error: function(jqXHR, textStatus, ex ){
        console.log(`${textStatus}, ${ex}, ${jqXHR.responseText}`);
        alert(`${textStatus}, ${ex} ${jqXHR.responseText}`);
        }
    
    
   });


//function

function getQuestion(){
    
    result.innerHTML ='';
    btn.innerHTML ='';

    let categoryOption = categories.value;
    let difficultyLevel = difficulty.value;
}

HTML：

<!doctype html>
<html lang="en">
<head>
    <title>Trivia</title>
    <link rel='stylesheet' href='css/Trivia.css' >
</head>
<body>
    <h1>Trivia</h1>
    <div>Score: <span id='score'>Correct 0 Wrong 0</span></div>
    <br>
    <div> 
        <label>Select Category:</label>
        <select id='category'></select>
        <br> 
        <label>Select Difficulty:</label>
        <select id='difficulty'></select>
    </div>
    <br><br>
    <div id='output'></div>
    <br>
    <div id='selAnswers'></div>
    <br>
    <button id='btn' type='submit'>Get First Question!</button>
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script src ='js/Trivia.js'></script>
</body>
</html>

标签： javascriptjqueryajaxapi

解决方案

根据文档，您应该将参数category、难度和type添加到您的 GET 请求中，指定从您的选择列表中选择的值。您似乎没有将这些参数添加到您的 ajax 调用中。

除此之外，“类别”参数不能作为文本类别（看起来您正在尝试执行的操作）传递，而是数字索引类别列表。直接来自 API 帮助页面，如下所示：

<option value="9">General Knowledge</option>
<option value="10">Entertainment: Books</option>
<option value="11">Entertainment: Film</option>
<option value="12">Entertainment: Music</option>
<option value="13">Entertainment: Musicals &amp; Theatres</option>
<option value="14">Entertainment: Television</option>
<option value="15">Entertainment: Video Games</option>
<option value="16">Entertainment: Board Games</option>
<option value="17">Science &amp; Nature</option>
<option value="18">Science: Computers</option>
<option value="19">Science: Mathematics</option>
<option value="20">Mythology</option>...

它看起来很容易实现。您的代码只是进行基本调用，没有任何参数。只需将它们添加到查询字符串中就可以了。

推荐阅读