时间戳

首页 > 解决方案 > 在不刷新页面的情况下更新视图上的数据 - Laravel

jquery - 在不刷新页面的情况下更新视图上的数据 - Laravel

问题描述

我想在 60 秒后频繁加载数据而不刷新页面。代码行是

<div id="callmeauto">@include('custome.myquestionodds')</div>

获取数据的“myquestionodds.blade.php”中的代码。它工作正常。但我想经常调用这个刀片 php 文件并显示在“callmeauto”div 中。我从这里尝试了一些代码。但不工作。如下例所示。我确定我走错了方向。

   $(document).ready(function() {
        $('#callmeauto').load('/custome/myquestionodds');
      });

标签： jqueryajaxlaravelautoload

解决方案

使用前端框架以 JSON 格式从端点获取数据的更好方法。

例如，您可以尝试使用Vue.js框架。在简单的情况下，您的问题将这样解决。

Vue({
    el: '#callmeauto',
    data: {
        contentToRender: "",
    },
    created() {
        this.loadContent();
        setInterval(this.loadContent, 60000)
    },
    methods: {
        loadContent(){
            axios.get('/custome/myquestionodds').then((response)=>{
                this.contentToRender = response.data;
            })
        }
    }
});

在您的模板中，您只需使用模板语法：

<div id="callmeauto">{{ contentToRender }}</div>

要使用 vue.js，您需要安装它。还有用于进行 ajax 调用的axios库。通过 CDN 的简化方式：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js></script>

推荐阅读