Django/Ajax - 如何使用 XMLHttpRequest 更新一个帖子的评论

问：

我有一篇文章/帖子，我希望通过 XMLHttpRequest 更新它的评论，但是当我尝试添加评论时，我在控制台中遇到以下错误：

错误 => GET http://127.0.0.1:8000/articles/add-article-comment net：：ERR_INTERNET_DISCONNECTED 该错误暗示了 Javascript 代码中的最后一行代码，即：

xhr.send(fd)

与我的问题相关的所有代码如下，我不想在 Jquery 中编写 Ajax 部分，如果有人能建议我应该更正代码的地方，我将不胜感激。而且每个新评论也添加到我的数据库中。

谢谢。

相关模板中将显示注释的代码如下：

{% for comment in comments %}
                                <li class="media">
                                    <a class="pull-right" href="#">
                                        <img class="media-object" src="/static/images/blog/Customer.jpg" alt="">
                                    </a>
                                    <div class="media-body">
                                        <ul class="sinlge-post-meta">
                                            <li><i class="fa fa-user"></i>{{ comment.user }}</li>
                                            <li>
                                                <i class="fa fa-calendar"></i> {{ comment.get_jalali_created_date }}
                                            </li>
                                        </ul>
                                        <p>
                                            {{ comment.text }}
                                        </p>
                                        <a class="btn btn-primary" onclick="fillParentId({{ comment.id }})"><i
                                                class="fa fa-reply"></i>reply</a>
                                    </div>
                                </li>

                                {% for sub_comment in comment.articlecomment_set.all %}
                                    <li class="media second-media">
                                        <a class="pull-right" href="#">
                                            <img class="media-object" src="/static/images/blog/Customer.jpg" alt="">
                                        </a>
                                        <div class="media-body">
                                            <ul class="sinlge-post-meta">
                                                <li><i class="fa fa-user"></i>{{ sub_comment.user }}</li>
                                                <li>
                                                    <i class="fa fa-calendar"></i> {{ sub_comment.get_jalali_created_date }}
                                                </li>
                                            </ul>
                                            <p>
                                                {{ sub_comment.text }}
                                            </p>
                                        </div>
                                    </li>
                                {% endfor %}
                            {% endfor %}

添加新注释的代码如下：

 <div class="replay-box" id="comment_form">
                        {% if request.user.is_authenticated %}
                            <div class="row">
                                <div class="col-sm-12">
                                    <h2>wite your comment in here</h2>
                                    <div class="text-area">
                                        <input type="hidden" id="parent_id" value="">
                                        <div class="blank-arrow">
                                            <label>comment text</label>
                                        </div>
                                        <span>*</span>
                                        <textarea name="message" rows="11" id="commentText"></textarea>
                                        <input type="hidden" id="article-id" value="{{ article.id }}">
                                        <a class="btn btn-primary " id="submit-btn">submit
                                            </a>
                                    </div>
                                </div>
                            </div>
                       
                        {% endif %}

view.py 的功能是：

def add_article_comment(request):
    if request.user.is_authenticated:
        article_id=request.GET.get('article_id')
        article_comment=request.GET.get('article_comment')
        new_comment=ArticleComment(article_id=article_id,text=article_comment, user_id=request.user.id)
        new_comment.save()

    return HttpResponse('response')

上述FBV的路径如下：

urlpatterns = [
  
    path('add-article-comment', views.add_article_comment, name='add_article_comment'),
]

最后，我想用XMLHttpRequest编写的Ajax部分如下：

let btn = document.getElementById('submit-btn')
btn.addEventListener('click', function (e) {
    e.preventDefault()
    const xhr = new XMLHttpRequest();

    let fd = new FormData()
    fd.append('text', document.getElementById('commentText').value)
    fd.append('article_id', document.getElementById('article-id').value)
    fd.append('csrfmiddlewaretoken', '{{csrf_token}}')


    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert("Form submitted successfully");
            document.getElementById("fd").reset();
            console.log(xhr.responseText);
        }
    }
    xhr.open('GET', '/articles/add-article-comment')
    xhr.send(fd)
})