评论发布及回复

1、将ajax写入函数，发布评论不成功

2、评论发布不写入函数，可以发布评论，但发布后，没有清空文本？

3、评论会发完成后，没有清空回复框

{% block js_extra %}
  <script>
    $(function () {
      function bindCommentPublishEvent(html) {
        /**
         * 绑定评论的表单提交对象
         * @type {*|Window.jQuery|HTMLElement}
         */
        var form = $('.comment-publish',html);
        // 发布回复评论按钮事件
        $('.btn', form).click(function () {
          var _form = $(this).parent()
          var content = $('input[name=content]', _form)
          var data = _form.serialize();
          $.ajax({
            url: '{{ url_for('qa.comments', answer_id=answer.id) }}',
            method: 'post',
            data: data,
            complete: function (res) {
              console.log('res', res)
              if (res.status === 201) {
                window.alert('评论成功');
                content.val()
              } else if (res.status === 400) {
                console.log(res.responseJSON.message);
                window.alert('请求失败');
              } else {
                window.alert('请求失败，请稍后重试');
              }
            }
          })
        })
      }
 
      // 评论回复按钮事件
      function bindReplyEvent(html){
        $('.link-reply',html).click(function () {
          var _id = $(this).data('id');
          var _form = $('#id-comment-' + _id);
          _form.removeClass('hidden');
        })
      }
 
      // 评论列表的异步加载
      var comment_ls = $('#id-comment-ls');
      var page = 1
 
      function loadData(page) {
        page = page || 1
        $.ajax({
          url: '{{ url_for('qa.comments', answer_id=answer.id) }}',
          method: 'get',
          data: {
            'page': page
          },
          complete: function (res) {
            if (res.status === 200) {
              var result = res.responseJSON;
              if (result.code === 0) {
                var html = $(result.data);
                // TODO 绑定回复事件
                bindReplyEvent(html);
                bindCommentPublishEvent(html);
                comment_ls.empty().append(html);
              } else {
                console.log('--------')
              }
            } else {
              window.alert('服务器正忙')
            }
          }
        })
      }
 
      $('.pager .previous').click(function () {
        page -= 1
        loadData(page);
      })
      $('.pager .next').click(function () {
        page += 1
        loadData(page);
      })
      // 默认加载第一页数据
      loadData(page)
    })
  </script>
{% endblock %}

慕九州ing 2024-04-25

源自：Flask开发在线问答系统的点赞评论模块 2-5 异步加载评论列表

收起

1回答

好帮手慕小猿 2024-04-25 23:01:16

同学，你好！同学把项目发送到632037011@qq.com的邮箱中，老师运行下，方便解决同学问题。

祝学习愉快~

收起回答

提问者慕九州ing #1

已发送。。。

2024-04-26 11:33:58
好帮手慕小猿回复提问者慕九州ing #2

同学，你好！1、评论失败，同学应该没有登录，登录下就可以评论成功了
2、评论、回复框没有清空内容，是因为同学的content.val（）函数中应该有个“”空的字符串，意思是将空的字符串赋值给content，这样input 框便没有内容。修改代码如下：
祝学习愉快~

2024-04-26 15:12:01