如何使用 AJAX 获取和显示 API 响应 [关闭]

Question

我正在尝试在 API 中发送我的汽车价值，该值来自下面的 html。

然后，我想使用 AJAX 在 API 中发送这个值。

然后我想像展示汽车一样展示所有模型。

$(document).ready(function() {
  $('#cars').on('change', function() {
    $.ajax({
      'url': 'https://us-central1-pitstop-8258d.cloudfunctions.net/models',
      'type': 'GET',
      'dataType': 'json',
      'data': {
        'make': $('#cars').val()
      },
      'success': function(response) {
        if (response.results) {
          var html = '';
          html += '<select name="cars2" id="cars2">';
          for (var i = 0; i < response.results.length; i++) {
            html += '<option value="' + response.results[i] + '">' + response.results[i] + '</option>';
          }
          html += '</select>';
          $('#results').html(html);

        }
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<select name="cars" id="cars">
  <option value="Acura">Acura</option>
  <option value="Audi">Audi</option>
  <option value="BMW">BMW</option>
  <option value="Tesla">Tesla</option>
</select>

<div id="results"></div>

Answer 1

目前尚不清楚您要问的实际问题是什么，因为您只是描述了您想要做的事情并显示了一些代码，但并没有说明实际问题是什么 - 与您的预期相比会发生什么，是否有错误等。

我已经编辑了您的问题，因此代码被包装在一个可以执行的 sn-p 中，并且从中我发现了问题所在 - 但是下次如果您可以自己这样做并描述在哪里会很棒您到底遇到了什么问题，以及这个问题究竟是如何表现出来的。

---

1：您尝试使用的 API 不允许直接从前端 JavaScript 访问它，因为不存在 CORS headers。如果您查看浏览器的 devtools 控制台，您会看到它显示了相应的错误：

CORS 策略已阻止从源“null”访问“https://us-central1-pitstop-8258d.cloudfunctions.net/models?make=Audi”处的 XMLHttpRequest：否“Access-Control-Allow-”请求的资源上存在 Origin' 标头。

要解决此问题，您需要后端的服务器端代码发出请求，并从前端调用此后端 API，而不是让前端自己发出请求。示例见this answer。

---

2：在初始页面加载时，不会进行 API 调用，因为它只对更改选择做出反应，而不是对初始选择做出反应。您可以通过在代码末尾添加$('#cars').change() 来强制它，这样它也会在页面加载时触发更改事件。

---

3：如果你看一下what the API returns，你会看到结构是这样的：

{
  "success": true,
  "data": [
    {
      "model": "100"
    },
    {
      "model": "80"
    },
    {
      "model": "90"
    },
    {
      "model": "A3"
    },
    {
      "model": "A3 Sportback e-tron"
    },
    ...
]

包含实际项目的数组称为data，而不是results。

---

4：单个结果项是具有属性model 的对象，而不是字符串。因此，您的当前可能只会为每个项目显示[object Object]。您需要改为访问model 属性：response.data[i].model

---

5：您没有转义插入到 HTML 中的文本。如果汽车模型包含" 双引号怎么办？它会破坏您的 value 属性，因为它由双引号分隔 - 仅作为示例。最好只插入一个<select>，然后使用mySelect.append($('<option>').attr('value', model).text(model)) 单独添加<option> 元素。或者，您可以使用 the $('<i/>').text(value).html() idiom 在将值嵌入到 HTML 字符串时对其进行转义。

您应该养成始终这样做的习惯，并在有任何未正确转义的内容时立即注意到，因为如果插入的数据来自不受信任的来源（例如用户输入），您不仅可以破坏你的页面/布局，但也可以introduce a cross-site scripting (XSS) security vulnerability。

---

总的来说，您似乎还没有弄清楚如何使用浏览器开发工具来查看错误以及调试和逐步执行 JavaScript 代码。看看这个devtools crash course！