Django 仿ajax传递数据（Django十）

之前用form表单传递数据，没有遇到任何问题

具体见：https://blog.csdn.net/qq_38175040/article/details/104867747

然后现在我想用ajax传递少量数据，因为在实际情况中，我们传递数据不可能全是用form，比如说展示数据库多条数据，我选择一条删除，这时我只要传递有限的几条数据到后端（比如说商品的id，然后数据库删除该条记录），最后前端进行div的局部刷新。

但是我找了网上很多ajax的相关写法，进行尝试，在我这里都会出现问题，最后在问答社区提问，有位大佬给我提供了一种写法。

  <div class="wrapper">
            {% for problem in problems %}
            <div class="ds-comment-body">
                <h3 id="pro_id">{{problem.pro_id}}</h3>
                <a title="设计达人"  target="_blank" class="user-name" >用户ID:</a>
                <a title="设计达人"  target="_blank" class="user-name" >{{ problem.user_id }}</a>   <br>
                <a title="设计达人"  target="_blank" class="user-name">用户名:</a>
                <a title="设计达人"  target="_blank" class="user-name" >{{ problem.user_name }}</a>   <br>
                <a href="mailto:{{ problem.mail }}">邮箱地址:{{ problem.mail }}</a>

                <p>{{ problem.theme }}</p>
                <p>{{ problem.content }}</p>
                <p>.............................................................................以下是评论区................................................................................</p>

                        <div class="test">
                            {% for an in ans %}
                            {% ifequal  an.to_pro_id    problem.pro_id  %}
                            <div lang="en-US" class="gitment-container gitment-comments-container">
                                <ul class="gitment-comments-list">
                                    <li class="gitment-comment">

                                        <div class="gitment-comment-main">
                                            <div class="gitment-comment-header">
                                                <a class="user-name">
                                                    {{an.user_name}}
                                                </a>
                                            </div>
                                            <div class="gitment-comment-body gitment-markdown">
                                                <p>{{an.ans_content}}</p>
                                        </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            {% endifequal %}
                           {% endfor %}

                            <div lang="en-US" class="gitment-container gitment-editor-container">
                                <div class="gitment-editor-main">

                                    <div class="gitment-editor-body">
                                        <div class="gitment-editor-write-field">
                                            <textarea placeholder="说点什么吧*" title="Login to Comment"  class="for_js"></textarea>
                                        </div>
                                        <div class="gitment-editor-preview-field gitment-hidden">
                                            <div class="gitment-editor-preview gitment-markdown"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="gitment-editor-footer">
                                    <button class="gitment-editor-submit" type="submit" id="btn" onclick="f1(this)">发表</button>
                                </div>

                            </div>
                        </div>

            </div>
            <br>
            {% endfor %}
    </div>

以上 的是我的全部div，我是用for循环创建的，因此所有的button，textarea都有相同的class属性
相当于创建了几条并列的text area标签以及多个并列的button

那么我想要点击第一个button传递第一个areatext的内容到后端，点击第二个button传递第二个areatext的内容到后端怎么做呢

详细代码如下：

<script>
    function  f1(tag) {
        var index=-1;
        var a = document.getElementsByClassName('gitment-editor-submit');
        var b = document.getElementsByClassName('for_js');
        for (var i = 0, len =a.length; i < len; i++) {
              var j = i + 1;
            if (tag == a[i]) {
                index = i;
                //alert(b[index].value)
                var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
                httpRequest.open('POST', '/ans_ajax/', true); //第二步：打开连接
                httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
                httpRequest.send('text='+b[index].value+"&pro_id="+j);//发送请求 将情头体写在send中

                httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
                    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功

                        var json = httpRequest.responseText;//获取到服务端返回的数据
                        //console.log(json);
                        //alert(json)
                        location.reload();
                        b[index].value = '';
                    }
                    else if(httpRequest.readyState ==0 && httpRequest.status==404){
                            alert("错误");
                    }
                };

            }
        }

    }
</script>

a,b根据class名获取页面所有的button和areatext，这边的解释详见：https://blog.csdn.net/qq_38175040/article/details/105385858

            httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
                    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功

                        var json = httpRequest.responseText;//获取到服务端返回的数据
                        //console.log(json);
                        //alert(json)
                        location.reload();
                        b[index].value = '';
                    }
                    else if(httpRequest.readyState ==0 && httpRequest.status==404){
                            alert("错误");
                    }
                };

这部分代码接受view方法返回的json数据，我们在此不需要json数据，直接用 location.reload(); 刷新当前整个页面

这样我们对数据库的变动就会展现，因为是刷新整个页面，所以耗费资源较多，但还是实现了需求（点击button将teatarea的内容传递至数据库并刷新页面，展现新的数据列表）

ok,这不就行了吗，要的就是这个效果