使用 Vue.js 以 JSON 格式返回列表的 API 的 AJAX 调用答案

【问题标题】：AJAX call to API which returns list in JSON format using Vue.js使用 Vue.js 以 JSON 格式返回列表的 API 的 AJAX 调用
【发布时间】：2021-10-27 11:54:48
【问题描述】：

我想对免费 API https://reqres.in/api/users 进行 AJAX 调用，它以 JSON 格式返回列表。而且我想使用 Vue.js 以便结果将显示在 HTML 中，但由于某种原因它不起作用。

小米js如下：

var app = new Vue({
  el: "#users",
  data: {
    usuarios: []
}});

$.ajax({
  method: "GET",
  url: "https://reqres.in/api/users",
  dataType: "json",
  success: function (usuarios){
    console.log(usuarios);
}})

而我的HTML代码如下。

 <div class="container text-center mt-4" id="userApp">
  <h1>Lista de usuarios</h1>

  <div id="users">
    
    <div class="row">
      <div class="col-md-4" v-for="usuario in data">
        <img 
          v-bind:src="usuario.avatar" 
          v-bind:alt="usuario.last_name">
        <p>{{ usuario.first_name }} - {{ usuario.last_name }}</p>
      </div>
    </div>
  
  </div>

</div>

通过这样做，我的页面上不会出现任何内容，并且必须显示一些图像以及下面每个图像（人）的名称。你能帮我检查一下错误在哪里吗？提前致谢！！

【问题讨论】：

那么控制台记录了什么？您是否检查过成功函数是否被调用？
我不知道该怎么做。我还是个学习基础知识的新手
结果将显示在 HTML 中，但由于某种原因它不起作用 - 它不起作用有一个很好的理由，因为你没有将结果分配到任何地方，但将其输出到控制台。在迁移到 Vue 之前，您可能需要了解 JS 的基础知识。至于控制台，F12。

标签： javascript json ajax vue.js

【解决方案1】：

再次，我建议你完全不要使用 jQuery 并引入 Axios，但是如果你坚持使用 jQuery，你可以这样做。

祝你的项目好运！

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  </head>
  <body>
    <div id="usersVueApp" class="container">  
      <div class="row"> 
        <div class="card col-3 p-2 m-3" v-for="(user,index) in users" :key="index">
          <img class="card-img-top":src="user.avatar" :alt="user.first_name">
          <div class="card-body">
            <h5 class="card-title">{{user.first_name}} {{user.last_name}}</h5>
            <p class="card-text"> 
               <a :href="`mailto:${user.email}`" class="btn btn-primary">Email {{user.first_name}}</a>
            </p>
          </div>
        </div> 
      </div>
    </div>
    <script>
    var app = new Vue({ 
      el: "#usersVueApp",

      data: function(){
        return { 
          users: [] 
        };
      },

      mounted : function() {
        this.loadUsers();
      },

      methods : {
        loadUsers : function () {
          const _this = this;
          $.ajax({
            method: "GET",
            url: "https://reqres.in/api/users",
            dataType: "json",
            success: function (users){
              _this.users = users.data;
           }});
        }
      }
    });
    </script>
  </body> 
</html>

【讨论】：

谢谢！这正是我想要的！
太棒了，请注意，这个解决方案的关键，或者说您缺少的，是您需要在 cue 范围内进行 AJAX 调用，然后将其分配给本地数据变量。跨度>

【解决方案2】：

实现此目的的正确方法是通过 Axios (https://www.npmjs.com/package/vue-axios) 之类的工具。

我不鼓励将 jQuery 与 Vue.js 一起使用，请保持干净。

来自上面链接中的 Axios 示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'
app.mount('#app')

// App.vue
import { inject } from 'vue'

export default {
  name: 'Comp',
  setup() {
    const axios: any = inject('axios')  // inject axios

    const getList = (): void => {
      axios
        .get(api)
        .then((response: { data: any }) => {
          console.log(response.data)
        });
    };

    return { getList }
  }
}

【讨论】：

感谢您的快速回复！实际上这是为了练习，我不允许使用其他工具。而且我不太了解axios。你知道如何只使用 jQuery 和 Vuej.js 来做到这一点吗？