AJAX 在 Django 视图中发布 XMLHttpRequest 检查失败

Question

我有一个简单的 html 页面，它呈现了许多几乎相同的表单供用户提交。提交后，视图旨在向数据库添加一行，重新创建具有略微更新数据的表单列表，并将其发送回浏览器（'/route/complete/' 映射到 urls.py 中的 add_completed_route_view）。

这是第一次完美运行。但是，一旦使用新的表单列表重新绘制页面，下一次提交将无法通过我在视图中的 request.is_ajax() 测试。这会导致它跳到 request.REQUEST['next'] 并随后跳到 home_view。

我已在下面注释掉它，但我也尝试将 c['HTTP_X_REQUESTED_WITH'] = 'XMLHttpRequest' 附加到视图，但没有帮助。

我正在寻求帮助，以确保在用户通过 AJAX 提交时标头继续具有适当的 XMLHttpRequest 参数。代码如下，非常感谢您的帮助。

script.js

<script>
$(document).ready(function() {
  $(".doneForm").submit(function() {
    var route_id = $(this).find('input[name=route_id]').val()
    var next = $(this).find('input[name=next]').val()
    var reqData = {route_id:route_id,next:next}


    $.ajax({
      type: "post",
      url: "/route/complete/",
      data: reqData,
      success: function(data) {
        $("#routeTable").html(data);
      }
    });
  return false;
  });
});
</script> 

和

template.html

<div id="routeTable">
  {% for route in route_list %}
  <div id="routeDone">
    <form class="doneForm" action="/route/complete/" method="post">
      <input type="hidden" name="route_id" value="{{ route.route_id }}" />
      <input type="hidden" name="next" value="{{ request.get_full_path }}" />
      <input type="submit" value="Done" class="doneButton" />
    </form>
  </div>
  {% endfor %}
</div>

和

views.py

def add_completed_route_view(request):
    if request.method == 'POST' and request.user.is_authenticated():
        add_completed_route(request)
        if request.is_ajax():
            wall_slug = get_wall_slug_from_route_id(request.REQUEST['route_id'])
            c = get_context_for_wall_page(request, wall_slug)
            # c['HTTP_X_REQUESTED_WITH'] = 'XMLHttpRequest'
            return render_to_response('m/js_route_table.html', c, context_instance=RequestContext(request))
        else:
            return HttpResponseRedirect(request.REQUEST['next'])
    else:
        return HttpResponseRedirect(reverse('home_view'))

Answer 1

问题在于，一旦 Ajax 完成，它会用一个新的表单替换原始表单 - 而这个表单不再附加 javascript 事件处理程序，因此下次表单通过正常的 POST 方法提交。

幸运的是，jQuery 有几个方法可以为您处理这个问题 - live 和 delegate。所以不要使用$(".doneForm").submit(function() ...，而是这样做：

$(".doneForm").live("submit", function() {...