Django和Ajax：如何制作提交按钮？

我对jquery和Ajax非常陌生，我很难用Ajax提交数据（这就是我被告知要做的）。我遵循这些例子：而且，它们并没有真正帮助我实现我的目标

url.py

 url(r'^rechargement/$', views.rechargement, name='rechargement'),

@login_required
def rechargement(request):
if request.POST:
    if request.is_ajax():
        print "AJAX"
    else:
        print "No AJAX"

    print request.POST
return render(request,"clients/packs.html",locals())

<script type="text/javascript">
$document.ready(function(){
  $("#recharge").submit(function(event){
$.ajax({
  type:"POST",
  url:"{% url 'rechargement' %}",
  data : {
    'pack': $('#rechargement').val()
  },
});
return false;
   };)
 });
</script>

视图.py

 url(r'^rechargement/$', views.rechargement, name='rechargement'),

@login_required
def rechargement(request):
if request.POST:
    if request.is_ajax():
        print "AJAX"
    else:
        print "No AJAX"

    print request.POST
return render(request,"clients/packs.html",locals())

<script type="text/javascript">
$document.ready(function(){
  $("#recharge").submit(function(event){
$.ajax({
  type:"POST",
  url:"{% url 'rechargement' %}",
  data : {
    'pack': $('#rechargement').val()
  },
});
return false;
   };)
 });
</script>

模板

<div class="container">
  <div class="row">
    <form id="recharge" action="" method="post">
      <fieldset>
        <legend> Choose your pack</legend>
        {% csrf_token %}
        <div class="col-md-3">
          <p>Pack 1</p>
          <input type="radio" name="pack" value="pack1">
        </div>
        <div class="col-md-3">
          <p>Pack 2</p>
          <input type="radio" name="pack" value="pack2">
        </div>
        <div class="col-md-3">
          <p>Pack 3</p>
          <input type="radio" name="pack" value="pack3">
        </div>
        <div class="col-md-3">
          <p>Pack 4</p>
          <input type="radio" name="pack" value="pack4">
        </div>
        <input type="submit" value="Recharge">
      </fieldset>
    </form>
   </div>
  </div>

选择你的背包
{%csrf_令牌%}
包1

包2

包3

包4

jquery

 url(r'^rechargement/$', views.rechargement, name='rechargement'),

@login_required
def rechargement(request):
if request.POST:
    if request.is_ajax():
        print "AJAX"
    else:
        print "No AJAX"

    print request.POST
return render(request,"clients/packs.html",locals())

<script type="text/javascript">
$document.ready(function(){
  $("#recharge").submit(function(event){
$.ajax({
  type:"POST",
  url:"{% url 'rechargement' %}",
  data : {
    'pack': $('#rechargement').val()
  },
});
return false;
   };)
 });
</script>

$document.ready（函数（）{
$（“#充值”）。提交（功能（事件）{
$.ajax({
类型：“POST”，
url:“{%url'充值'%}”，
数据：{
'包装'：$（'充电'）.val（）
},
});
返回false；
};)
});

当我使用submit按钮提交时，我得到了一个POST 200，这很好，但是我得到了“No AJAX”打印，即使request.POST打印正确显示了csrf令牌和值：

 No AJAX
 <QueryDict: {u'csrfmiddlewaretoken': [u'i************v'], u'pack': [u'pack1']}>
 [30/Sep/2015 08:57:18] "POST /clients/rechargement/ HTTP/1.1" 200 4017

没有AJAX
[2015年9月30日08:57:18]“POST/clients/RESCENTION/HTTP/1.1”200 4017

---

我做错了什么？

您的请求是以表单提交的形式提交的，而不是ajax请求。您可以使用以下代码

$(document).ready(function(){
$('#recharge').submit(function (event) {
event.preventDefault();
$.ajax({
  type:"POST",
  url:"{% url 'rechargement' %}",
  data : {
          'pack': $('#rechargement').val(),
          'csrfmiddlewaretoken':$("input[name=csrfmiddlewaretoken]").val()
         },
   });
   return false;
   };)
});

---

不要忘记ajax请求中的

csrfmiddlewaretoken

<调用code>preventDefault（）以避免默认事件处理程序

您应该返回一个

http响应

，在代码中打印到服务器控制台。我想了解我正在做什么（以及发生了什么错误），我将删除所有打印，而不是污染错误日志！检查这个