默山 2021-07-03 16:34 采纳率: 0%
浏览 52
已采纳

socket.emit之后不想刷新页面

html中有id是btn的按钮,然后绑定了事件:

        document.querySelector("#btn").onclick = () => {
            const msg = document.querySelector('#msg').value;
            const post_time = new Date();
            socket.emit('client_send', {
                'name': '{{current_user.name}}',
                'avatar': '{{current_user.get_gravatar_url()}}',
                'msg': msg,
                'time': post_time.toLocaleDateString()
            });
            // alert("send")
        };

然后服务器收到消息,广播,接收服务器消息

@chat.route('/chatroom', methods=['POST', 'GET'])
def chatroom():
    return render_template('/chatroom.html')

@socketio.on("client_send", namespace='/msg')
def client_send(data):
    if data['msg'] != '':
        emit('server_response',
             {'name': data['name'],
              'avatar': data['avatar'],
              'msg': data['msg'],
              'time': data['time'],
              },
             broadcast=True
             )
    log.debug(data)

message_box是显示消息的div

        socket.on('server_response', function (res) {
            // alert(res.msg)
            var htmlData = '<div class="msg_item fn-clear">'
                + '   <div class="uface"><img src="' + res.avatar + '" width="40" height="40"  alt=""/></div>'
                + '   <div class="item_right">'
                + '     <div class="msg own">' + res.msg + '</div>'
                + '     <div class="name_time">' + res.name + ' · ' + res.time + '</div>'
                + '   </div>'
                + '</div>';
            $("#message_box").append(htmlData);
            $('#message_box').scrollTop($("#message_box")[0].scrollHeight + 20);
        });

但是每次emit之后页面都会自己刷新,一刷新,刚刚message_box里面append的内容就没了
怎么阻止它刷新呢?好像没查到什么相关资料

  • 写回答

1条回答 默认 最新

  • 默山 2021-07-04 14:53
    关注

    我懂了,不用回答了,谢谢!

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!