旭北阳
2021-04-30 15:42
采纳率: 50%
浏览 118

ajax为什么不能在vue元素中使用

<div id="app">

    <input type="button" value="Get Server Time" id="btn">

</div>

<div id="showtime" class="displaybox"></div>
 
<script>
(function(){
 
    var btn = document.getElementById("btn");
    btn.addEventListener('click', getServerTime);
    var xhr = new XMLHttpRequest();
 
    function getServerTime() {
        var myurl = 'data.php';
        myRand = parseInt(Math.random() * 99999999);
        // 构造随机数,防止缓存问题
 
        var modurl = myurl + "?rand=" + myRand;
        xhr.open("GET", myurl);
        xhr.onreadystatechange = xhrResponse;
        xhr.send();
    }
 
    function xhrResponse() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var timeValue = xhr.responseText;
            
            document.getElementById('showtime').innerHTML = timeValue;;
        }
    }
    
<script>
    new Vue({
        el:"#app"
    })
</script>
})()
</script>

这是部分代码,我为input绑定了ajax函数,实现实时输出数据。

但是当div绑定了vue,就是添加了id="app",就导致绑定的ajax函数失效,id删除就正常输出了

这是为什么呀

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • 已采纳


    div绑定了vue,div的代码就变成vue的模板,不能再用  btn.addEventListener('click', getServerTime); 绑定事件
    也不要 document.getElementById('showtime').innerHTML = timeValue 这样修改元素属性

    都要改用vue对应的方法
     

    点赞 评论
  • CSDN专家-Time 2021-04-30 15:43

    你可以用axios jq不推荐在vue里用 jquery还是能用的 你没配好

    vue会渲染id为app的div,所以你的ajax失效了

    点赞 评论
  • CSDN专家-Time 2021-04-30 15:57
    <div id="app">
     
        <input type="button" value="Get Server Time" id="btn">
     
    </div>
     
    <div id="showtime" class="displaybox"></div>
     
    <script>
    (function(){
     
        var btn = document.getElementById("btn");
        btn.addEventListener('click', getServerTime);
        var xhr = new XMLHttpRequest();
     
        function getServerTime() {
            var myurl = 'data.php';
            myRand = parseInt(Math.random() * 99999999);
            // 构造随机数,防止缓存问题
     
            var modurl = myurl + "?rand=" + myRand;
            xhr.open("GET", myurl);
            xhr.onreadystatechange = xhrResponse;
            xhr.send();
        }
     
        function xhrResponse() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var timeValue = xhr.responseText;
                
                document.getElementById('showtime').innerHTML = timeValue;;
            }
        }
    })()
    </script>
    <script>
        new Vue({
            el:"#app"
        })
    </script>
    点赞 评论
  • iMingzhen 2021-04-30 15:53

    addEventListener事件得在vue的mounted生命周期中添加

    点赞 评论
  • 你这35行39行的script删了试试,这么看难道不报错吗?

    点赞 评论
  • 有问必答小助手 2021-05-06 15:53

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    点赞 评论
  • 有问必答小助手 2021-05-07 14:01

    非常感谢您使用有问必答服务,为了后续更快速的帮您解决问题,现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中,希望能得到您的支持与协助!

    速戳参与调研>>>https://t.csdnimg.cn/Kf0y

    点赞 评论

相关推荐 更多相似问题