Question

我是jquery和Ajax的新手，我很难用ajax提交数据（这是我被告知要做的事情）。我遵循了以下示例：How do I POST with jQuery/Ajax in Django?和Django jQuery post request，但它们并没有真正帮助我实现目标。

urls.py

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

views.py

@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())

模板

<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>

jquery的

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

当我使用提交按钮提交时，我得到一个POST 200，这很好，但我得到了＃34;没有AJAX＆＃34;即使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

我做错了什么？

Answer 1

您的请求是以表单提交方式提交的，而不是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。调用preventDefault()以避免使用默认事件处理程序

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

1 个答案: