用Jquery和Ajax查询Django数据库
用Jquery和Ajax查询Django数据库
提问于 2019-03-25 04:21:39
我有一个POST请求，在提交表单时将数据传递给我的数据库。
我的意思是：
home.html
<script type="text/javascript">
$(document).ready(function(){
var postForm = $(".form-post")
//POSTING DATA INTO DATABASE
postForm.submit(function(event){
event.preventDefault();
var thisForm =$(this)
var actionEndPoint = thisForm.attr("action");
var httpMethod = thisForm.attr("method");
var formData = thisForm.serialize();
$.ajax({
url: actionEndPoint,
method: httpMethod,
data: formData,
success:function(data){
console.log(data)
$(".form-post")[0].reset();
//I WANT TO PASS THE NEWLY ADDED DATA TO DISPLAY WITHOUT REFRESH
$.ajax({
type: 'GET',
url: '{% url "postInfo" %}',
dataType : 'json',
success: function(cdata){
$.each(cdata, function(id,posts){
$('#cb').append('<li>' +posts['fields'].title+ ' ' +posts['fields'].body+ '</li>');
});
}
});
},
error:function(errData){
}
})
})
})
</script>就像现在一样，每次我添加一个帖子，它都会显示多个相同的帖子。
这是我的观点
views.py
def postInfo(request): # GET REQUEST
if request.method == 'GET' and request.is_ajax():
mytitle = Post.objects.all().order_by('-date_posted')
response = serializers.serialize("json", mytitle)
return HttpResponse(response, content_type='application/json')
def posting(request): # POST REQUEST
if request.method == 'POST' and request.is_ajax():
title = request.POST.get('postTitle')
content = request.POST.get('postContent')
post = Post()
post.title = title
post.body = content
post.author = request.user
post.save()
return HttpResponse('') models.py
class Post(models.Model):
title = models.CharField(max_length=50)
body = models.TextField()
date_posted = models.DateTimeField(default=timezone.now)
author = models.ForeignKey(User, on_delete=models.CASCADE)
def __str__(self):
return self.title我如何才能让它只显示我添加的帖子+数据库中的内容，而不显示多个相同的帖子？谢谢你的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-03-25 08:12:58
因为您请求在post请求成功后发送数据库中的每个帖子，所以您会收到多个帖子。
假设cdata是一个数组，您可以这样做
let innerHtml;
cdata.forEach(function(obj) {
innerHtml.append(`<li>${data['fields'].title} ${data['fields'].body}</li>`);
});
$('#cb').html(innerHtml);$('#cb').html(...)将替换元素的HTML内容，而不是添加到元素中，因此您不会得到任何重复的条目。此外，在append方法中使用template literal可以使事情变得更简洁一些。
或者，您可以只发送刚刚在it's HttpResponse中的posting视图中创建的帖子。这也会更快，因为您减少了提交表单时发出的请求数量。
views.py
# Other endpoints
...
def posting(request): # POST REQUEST
if request.method == 'POST' and request.is_ajax():
title = request.POST.get('postTitle')
content = request.POST.get('postContent')
post = Post()
post.title = title
post.body = content
post.author = request.user
post.save()
# Send new post as response
response = serializers.serialize('json', post)
return HttpResponse(response, content_type='application/json') home.html
<script type="text/javascript">
$(document).ready(function(){
var postForm = $(".form-post");
// POSTING DATA INTO DATABASE
postForm.submit(function(event){
event.preventDefault();
var thisForm = $(this);
var actionEndPoint = thisForm.attr("action");
var httpMethod = thisForm.attr("method");
var formData = thisForm.serialize();
$.ajax({
url: actionEndPoint,
method: httpMethod,
data: formData,
success: function(data) {
console.log(data);
$(".form-post")[0].reset();
// Add the new post to $('#cb')
$('#cb')
.append(`<li>${data['fields'].title} ${data['fields'].body}</li>`);
},
error: function(errData){
// Do something
}
})
})
})
</script>Stack Overflow用户
发布于 2019-03-25 08:06:50
您可以让POST视图返回序列化的实例，如下所示。这可能不是完全正确的，因为我不知道您使用什么进行序列化，但它应该会给您一个想法。
如果您不喜欢这样，可以将帖子的id作为data-post-id属性注入到html中，然后只在不存在的情况下将其附加到$('#cb')。
def posting(request): # POST REQUEST
if request.method == 'POST' and request.is_ajax():
title = request.POST.get('postTitle')
content = request.POST.get('postContent')
post = Post()
post.title = title
post.body = content
post.author = request.user
post.save()
response = serializers.serialize("json", post)
return HttpResponse(response, content_type='application/json')
$.ajax({
url: actionEndPoint,
method: httpMethod,
data: formData,
success:function(data){
console.log(data)
$(".form-post")[0].reset();
$('#cb').append('<li>' +data['fields'].title+ ' ' +data['fields'].body+ '</li>');
}
});
},
error:function(errData){
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55328190
复制相关文章
相似问题