之前用form表单传递数据，没有遇到任何问题
具体见：https://blog.****.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.****.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的内容传递至数据库并刷新页面，展现新的数据列表）