从Django模型获取数据并使用AJAX在html表中显示
亚什莫拉尔
我已经从JsonResponse（Django）中搜索并实现了许多使用AJAX显示html表的不同方法，但无济于事。
当前，我得到的最远的是对网络控制台的响应：
{"products": "[{\"model\": \"products.product\", \"pk\": 2, \"fields\": {\"name\": \"Bag\", \"description\": \"Carries items conspicuously \", \"price\": \"10.99\"}}, {\"model\": \"products.product\", \"pk\": 3, \"fields\": {\"name\": \"iPhone 8 Plus\", \"description\": \"a mobile device from Apple\", \"price\": \"850.00\"}}, {\"model\": \"products.product\", \"pk\": 8, \"fields\": {\"name\": \"Shoes\", \"description\": \"For your feet\", \"price\": \"49.50\"}}, {\"model\": \"products.product\", \"pk\": 9, \"fields\": {\"name\": \"Gloves\", \"description\": \"For your hands\", \"price\": \"2.99\"}}, {\"model\": \"products.product\", \"pk\": 10, \"fields\": {\"name\": \"Blanket\", \"description\": \"Keep warm\", \"price\": \"13.79\"}}, {\"model\": \"products.product\", \"pk\": 11, \"fields\": {\"name\": \"Gown\", \"description\": \"Sleep time\", \"price\": \"25.99\"}}]"}
但是我希望这个字典通过ajax显示在我的html表上
我的Django模型如下所示：
class Product(models.Model):
def __str__(self):
return self.name
name = models.CharField(max_length = 200)
description = models.TextField()
price = models.DecimalField(decimal_places=2,max_digits=100000)
我的django视图：
def product_list(request):
productData = serializers.serialize("json", Product.objects.all())
return JsonResponse({"products": productData})
我的html页面正文：
<body style='text-align:center'>
<table class="table table-striped" id="product-table">
<thead class="thead-dark"><th>Item<th>Description<th>Price</th><th></th></thead>
<tr>
<form id="add-product">{% csrf_token %}
<td><a><input type="text" class="form-control form-control-sm" id="newProductName" placeholder="Product name"></a></td>
<td><a><input type="text" class="form-control form-control-sm" id="newProductDesc" placeholder="Product description"></a></td>
<td><a><input type="text" class="form-control form-control-sm" id="newProductPrice" placeholder="£--.--"></a></td>
<td><button type="submit" class="btn btn-primary btn-sm" id="newProductSubmit">add</button></td>
</form>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="{% static 'main.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
和我的ajax函数来获取jsonresponse：
$(document).ready(function() {
$.ajax({
url: 'products/getProducts/',
datatype: 'json',
type: 'GET',
success: function (data) {
alert("Got data!")
jData = JSON.parse(data)
alert("got json products!");
}
});
});
使用ajax，我知道我缺少将数据转换为html并追加到表中的内容，但是当我尝试这样做时，它根本没有添加任何内容
佐利
我仅向您提供一个示例，说明如何使用上面提供的javascript JSON字符串数据以HTML格式创建表：
<div>
<table cellpadding="2" cellspacing="2" border="0" bgcolor="#dfdfdf" width="40%" align="center">
<thead>
<tr>
<th width="30%">Name</th>
<th width="50%">Description</th>
<th width="12%">price</th>
</tr>
</thead>
<tbody id="tableData"></tbody>
</table>
</div>
<style>
table, td {
border: 1px solid black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
var newProducts = {"products": "[{\"model\": \"products.product\", \"pk\": 2, \"fields\": {\"name\": \"Bag\", \"description\": \"Carries items conspicuously \", \"price\": \"10.99\"}}, {\"model\": \"products.product\", \"pk\": 3, \"fields\": {\"name\": \"iPhone 8 Plus\", \"description\": \"a mobile device from Apple\", \"price\": \"850.00\"}}, {\"model\": \"products.product\", \"pk\": 8, \"fields\": {\"name\": \"Shoes\", \"description\": \"For your feet\", \"price\": \"49.50\"}}, {\"model\": \"products.product\", \"pk\": 9, \"fields\": {\"name\": \"Gloves\", \"description\": \"For your hands\", \"price\": \"2.99\"}}, {\"model\": \"products.product\", \"pk\": 10, \"fields\": {\"name\": \"Blanket\", \"description\": \"Keep warm\", \"price\": \"13.79\"}}, {\"model\": \"products.product\", \"pk\": 11, \"fields\": {\"name\": \"Gown\", \"description\": \"Sleep time\", \"price\": \"25.99\"}}]"};
var mainObj = JSON.parse(newProducts.products); // I created an object from the json response
// you can iterate over the javascript Object
var k = '<tbody>'
for(i = 0;i < mainObj.length; i++){
k+= '<tr>';
k+= '<td>' + mainObj[i]["fields"]["name"] + '</td>';
k+= '<td>' + mainObj[i]["fields"]["description"] + '</td>';
k+= '<td>' + mainObj[i]["fields"]["price"] + '</td>';
k+= '</tr>';
}
k+='</tbody>';
document.getElementById('tableData').innerHTML = k;
</script>
这是上面代码的简单表结果：
我希望这可以告诉您一些方向。您当然可以设置表的样式（或以其他方式创建表），并且可以访问研究和使用此示例的所有其他数据。
因此，您应该通过成功调用添加的javascript函数来扩展Ajax ：我已将其放入jQuery / javasript。
$(document).ready(function() {
$.ajax({
url: 'products/getProducts/',
datatype: 'json',
type: 'GET',
success: function (data) {
alert("Got data!")
jData = JSON.parse(data)
alert("got json products!");
tableFromResponse(jData);
}
});
});
function tableFromResponse(responseData) {
var mainObj = JSON.parse(responseData.products);
var k = '<tbody>'
for(i = 0;i < mainObj.length; i++){
k+= '<tr>';
k+= '<td>' + mainObj[i]["fields"]["name"] + '</td>';
k+= '<td>' + mainObj[i]["fields"]["description"] + '</td>';
k+= '<td>' + mainObj[i]["fields"]["price"] + '</td>';
k+= '</tr>';
}
k+='</tbody>';
document.getElementById('tableData').innerHTML = k;
}
（当然，如果造成麻烦，可以从代码中忽略很多json.parse步骤。因为在这种情况下，我编写的代码中没有来自Django的真实响应数据）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Android Studio Kotlin：提取为常量
- 2
IE 11中的FormData未定义
- 3
计算数据帧R中的字符串频率
- 4
如何在R中转置数据
- 5
如何使用Redux-Toolkit重置Redux Store
- 6
Excel 2016图表将增长与4个参数进行比较
- 7
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 8
未捕获的SyntaxError：带有Ajax帖子的意外令牌u
- 9
OpenCv：改变 putText() 的位置
- 10
ActiveModelSerializer仅显示关联的ID
- 11
算术中的c ++常量类型转换
- 12
如何开始为Ubuntu开发
- 13
将加号/减号添加到jQuery菜单
- 14
去噪自动编码器和常规自动编码器有什么区别？
- 15
获取并汇总所有关联的数据
- 16
OpenGL纹理格式的颜色错误
- 17
在 React Native Expo 中使用 react-redux 更改另一个键的值
- 18
http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。
- 19
TreeMap中的自定义排序
- 20
Redux动作正常，但减速器无效
- 21
如何对treeView的子节点进行排序
我来说两句