gpt4 book ai didi

使用 vuejs 进行 ajax 调用

转载 作者:搜寻专家 更新时间:2023-10-30 23:00:34 25 4
gpt4 key购买 nike

我试图从传递对象的端点 api/data 获取数据。但是当我运行我的应用程序时,我在控制台和网络选项卡中看不到任何内容,我也看不到任何 xhr 请求。控制台中也没有警告和错误。我在这里做错了什么吗?我已经正确检查了端点及其从后端传递的数据。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FLashy</title>
<link rel="stylesheet" href="http://localhost:8000/css/bootstrap.min.css" media="screen" title="no title">

</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4" id="app">
<h3 class="Text center">Datas</h3>
<p>
@{{ datas }}
</p>
</div>
</div>
</div>

<!-- scripts -->
<script src="http://localhost:8000/js/jquery-2.2.4.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js" charset="utf-8"></script>
<script src="http://localhost:8000/js/vue.js" charset="utf-8"></script>
<script src="http://localhost:8000/js/vue-resource.min.js" charset="utf-8"></script>

<script type="text/javascript">

new Vue({
el: '#app',

data: {

},

methods:{

fetchData: function(){
this.$http.get('api/data').then(function(response){

// this.$set('datas', response.data);
console.log(response);
}, function(response){
// error callback
});
},

ready: function(){
this.fetchData();
}
}
});
</script>
</body>
</html>

网络.php

Route::get('api/data', function(){
$a = [];
$a['id'] = 1;
$a['message'] = 'Lorem ipsum dolor sit amet, consectetur';
$a['status'] = 'Completed';
return response()->json($a,200);
});

最佳答案

您的 ready Hook 在 methods:{} 处理程序内部,但实际上应该在外部:

methods: {
fetchData: function () {
// your AJAX here
}
},
ready: function () {
this.fetchData()
}

关于使用 vuejs 进行 ajax 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39796766/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com