使用ajax请求成功返回的数据替换下面代码中的imge_list,并给出ajax的代码 <div class="row"> {% for imge in imge_list %} {% if not class_name or imge.class_name == class_name %} <div class="col-md-6" id="imge_id" style="width: 310px"> <div class="thumbnail"> <p></p> <form action="{% url 'delete_image' %}" method="POST"> {% csrf_token %} <input type="hidden" name="image_id" value="{{ imge.id }}"> <button type="submit" class="btn btn-sm pull-right" id="delete-button">删除</button> </form> <span class="label label-primary" style="font-size: 20px;">类别</span> <span style="font-size: 20px;">{{ imge.class_name }}</span> <span class="label label-success pull-right" style="font-size: 5px;">{{ imge.confidence }}</span> <p></p> <img src="{{ imge.result_image }}" class="img-rounded" alt="..." height="300px" width="300px"> <span class="label label-info">坐标(xywh):</span> <br>{{ imge.location }}<br> <span class="label label-danger">消耗时间:</span> {{ imge.comsume_time }}<br> <span class="label label-success">预测日期:</span> {{ imge.c
时间: 2023-06-18 11:03:33 浏览: 93
使用ajax取得数据
以下是一个简单的ajax请求代码示例,可以将其放在页面中的<script>标签中,或者单独创建一个.js文件引入到页面中:
```
$.ajax({
url: "your_url", //请求的地址
type: "get", //请求的方法,可以是get或post
dataType: "json", //返回的数据类型
success: function (data) { //请求成功后的回调函数
var imge_list = data.imge_list; //从返回的数据中获取要替换的数据
var html = ""; //用于存储替换后的html代码
for (var i = 0; i < imge_list.length; i++) {
var imge = imge_list[i];
//根据获取到的数据拼接html代码
html += '<div class="col-md-6" id="imge_id" style="width: 310px">';
html += '<div class="thumbnail">';
html += '<p></p>';
html += '<form action="{% url \'delete_image\' %}" method="POST">';
html += '{% csrf_token %}';
html += '<input type="hidden" name="image_id" value="' + imge.id + '">';
html += '<button type="submit" class="btn btn-sm pull-right" id="delete-button">删除</button>';
html += '</form>';
html += '<span class="label label-primary" style="font-size: 20px;">类别</span>';
html += '<span style="font-size: 20px;">' + imge.class_name + '</span>';
html += '<span class="label label-success pull-right" style="font-size: 5px;">' + imge.confidence + '</span>';
html += '<p></p>';
html += '<img src="' + imge.result_image + '" class="img-rounded" alt="..." height="300px" width="300px">';
html += '<span class="label label-info">坐标(xywh):</span><br>' + imge.location + '<br>';
html += '<span class="label label-danger">消耗时间:</span>' + imge.consume_time + '<br>';
html += '<span class="label label-success">预测日期:</span>' + imge.date + '<br>';
html += '</div>';
html += '</div>';
}
//将替换后的html代码插入到页面中
$(".row").html(html);
},
error: function (xhr, textStatus, errorThrown) { //请求失败后的回调函数
console.log(errorThrown);
}
});
```
注:上述代码中的"your_url"应该替换成你实际的ajax请求地址。另外,由于我不知道你的后端返回的数据格式,所以在success回调函数中的代码可能需要根据你的实际情况做一些修改。
阅读全文