AJAX вызов API, который возвращает список в формате JSON с использованием Vue.js

ProgramBox

AJAX вызов API, который возвращает список в формате JSON с использованием Vue.js

Post author:admin
Запись опубликована:11 января, 2022
Post category:Вопросы по программированию

#javascript #json #ajax #vue.js

Вопрос:

Я хочу сделать вызов AJAX для бесплатного API https://reqres.in/api/users который возвращает список в формате JSON. И я хочу использовать Vue.js так что результат будет показан в HTML, но по какой-то причине это не работает.

Mi 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>

При этом на моей странице ничего не появится, и должны будут появиться некоторые изображения и имя каждого изображения (человека) ниже.
Не могли бы вы помочь мне проверить, где ошибка?
Заранее спасибо!!

1. Так что же регистрируется в консоли? И вы проверили, что функция успеха вообще вызывается?

2. Я не знаю, как это сделать. Я все еще новичок, изучающий основы

3. результат будет показан в HTML, но по какой — то причине он не работает -он не работает по очень веской причине, потому что вы нигде не назначали результат, а выводили его на консоль. Возможно, вы захотите изучить основы JS, прежде чем переходить на Vue. Что касается консоли, F12.

Ответ №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>

1. Спасибо! Это было именно то, что я искал!!

2. Потрясающе, обратите внимание, что суть этого решения или то, чего вам не хватало, заключается в том, что вам нужно выполнить вызов AJAX в рамках cue, а затем назначить его локальной переменной данных.

Ответ №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 }
  }
}

1. Спасибо за ваш быстрый ответ! На самом деле это для тренировки, и мне не разрешается использовать другие инструменты. И я действительно не понимаю аксиоса. Знаете ли вы, как это сделать, просто используя jQuery и Vuej.js ?

Метки: AJAX вызов API, который возвращает список в формате JSON с использованием Vue.js