Javascript Django、Ajax和jQuery-无需重新加载页面和打印的发布表单”;“成功”;给用户的消息
我想请你帮忙。我想创建一个简单的投票系统。我总算成功了。我有一个简单的“向上”按钮,post表单中有一个简单的+1整数作为post的scorevalue。现在有很多问题,但我会在以后和他们斗争 现在我想在不刷新页面的情况下增加+1分(就像大多数现代网站一样)。我在谷歌上搜索了一下,得出了这样一个结论:我不得不说它工作得相当好,即使我对js、jquery或ajax一无所知 我的问题是,javascript添加了这个+1,但它也给了我一些我无法理解的错误:Javascript Django、Ajax和jQuery-无需重新加载页面和打印的发布表单”;“成功”;给用户的消息,javascript,python,jquery,django,ajax,Javascript,Python,Jquery,Django,Ajax,我想请你帮忙。我想创建一个简单的投票系统。我总算成功了。我有一个简单的“向上”按钮,post表单中有一个简单的+1整数作为post的scorevalue。现在有很多问题,但我会在以后和他们斗争 现在我想在不刷新页面的情况下增加+1分(就像大多数现代网站一样)。我在谷歌上搜索了一下,得出了这样一个结论:我不得不说它工作得相当好,即使我对js、jquery或ajax一无所知 我的问题是,javascript添加了这个+1,但它也给了我一些我无法理解的错误: responseText: "TypeEr
responseText: "TypeError at /viewquestion/6/voteup\n__init__() missing 1 required positional argument: 'data'\n\nRequest Method: POST\nRequest URL: http://127.0.0.1:8000/viewquestion/6/voteup\nDjango Version: 3.0.4\n
我想要么摆脱它们,要么理解它们的本质:p
我的第二个或主要问题是。投票是有效的,但分数并没有改变,因为当然,页面并没有重新加载。我也不能为用户打印“成功投票”信息,因为网站并没有刷新
给用户一些简单的信息“投票成功”对我来说就足够了。最好的情况是立即更新分数,但我不知道这会使事情复杂化多少
你能帮我解决这个问题,或者给我指出正确的方向吗?因为我不懂js/ajax或jquery,所以我很难想出谷歌的点子
以下是我现在能做的:
base.html:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script>
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
</script>
home.html:
<ul>
{% for question in allquestionswithanswers %}
<li>
{{ question }} Score: {{ question.votesscore }} {{ question.user }}
{% if messages %}
{% for message in messages %}
{{ message }}
{% endfor %}
{% endif %}
<br><br>
<form class='my-ajax-form' method='POST' action='.' data-url="{% url 'questionvoteup' question.id %}" >
{% csrf_token %}
<button type='submit'>UP</button>
</form>
{% for answer in question.answer_set.all %}
{{ answer }}<br>
{% endfor %}
</li>
{% endfor %}
</ul>
{所有问题中的问题百分比超过回答者%}
-
{question}得分:{{question.votesscore}{{{question.user}}
{%if消息%}
{消息%中的消息为%s}
{{message}}
{%endfor%}
{%endif%}
{%csrf_令牌%}
向上的
{问题中的答案为%answer\u set.all%}
{{答案}}
{%endfor%}
{%endfor%}
谢谢。:第一个参数data应该是dict实例
你的看法:
def questionvoteup(request, question_pk):
question = get_object_or_404(Question, pk=question_pk, user=request.user)
if request.is_ajax() and request.method == "POST":
question.votesscore += 1
question.amountofvotes += 1
question.save()
data = {
"msg": 'Thank you for your vote!'
}
return JsonResponse(data)
else:
return HttpResponse(400, 'Invalid form')
而不是在模板中:
$(".my-ajax-form").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.data('url');
$.post(url).done(function(data) {
alert(data.msg); // get your response data
});
});
非常感谢你!我以为“数据”是我找不到的某个值名称。但“数据”是js试图返回的东西,现在它有了意义。您能告诉我,如何打印返回的“数据”吗?我试图使用{{data}}或{{{msg}}进行渲染,但没有任何东西是以这种方式渲染的。此外,谷歌搜索“django如何打印json响应”对我来说也不太合适:P@Peksio,我用模板中的一个小示例编辑了我的答案
$(".my-ajax-form").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.data('url');
$.post(url).done(function(data) {
alert(data.msg); // get your response data
});
});