使用 Vue.js 以 JSON 格式返回列表的 API 的 AJAX 调用
Posted
技术标签:
【中文标题】使用 Vue.js 以 JSON 格式返回列表的 API 的 AJAX 调用【英文标题】：AJAX call to API which returns list in JSON format using Vue.js 【发布时间】：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:>
<p> usuario.first_name - usuario.last_name </p>
</div>
</div>
</div>
</div>
通过这样做，我的页面上不会出现任何内容，并且必须显示一些图像以及下面每个图像（人）的名称。 你能帮我检查一下错误在哪里吗？ 提前致谢！！
【问题讨论】：
那么控制台记录了什么？您是否检查过成功函数是否被调用？ 我不知道该怎么做。我还是个学习基础知识的新手 结果将显示在 HTML 中，但由于某种原因它不起作用 - 它不起作用有一个很好的理由，因为你没有将结果分配到任何地方，但将其输出到控制台。在迁移到 Vue 之前，您可能需要了解 JS 的基础知识。至于控制台，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" :>
<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 来做到这一点吗？以上是关于使用 Vue.js 以 JSON 格式返回列表的 API 的 AJAX 调用的主要内容，如果未能解决你的问题，请参考以下文章