Question

我正在尝试通过ajax使用表单向导。我有一个单独的模板，当用户想要开始使用表单时，首先加载该模板。然后通过ajax重新加载，直到它完成。

首先调用ajax加载表单：

$('#create-modal').click(function(){
   $.ajax({
        type: "GET",
        url:"/create/",
        data:{
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
        },
        success: function(data){
            $('#creation').html(data);
        },
        dataType: 'html'
    });
});

这是重新加载提交的ajax调用：

$('#creation').on('submit', '#creation-form' , function(e){
    e.preventDefault();
    var fd = new FormData($('#creation-form').get(0));
    $.ajax({
      url: '/create/',
      data: fd,
      type: "POST",
      success: function(data){
            $('#creation').html(data);
          },
      processData: false,
      contentType: false
    });
});

表单可以完成并保存到数据库中就好了，但是上一步按钮不起作用，它只是在我点击它时继续向表格前进。

<button class="btn btn-primary" aria-hidden="true" type="submit" name="wizard_goto_step" value="{{ wizard.steps.prev }}">Previous</button>

和所有其他变种，最后，第一......

我没有包含所有代码，因为当我直接从浏览器调用url时，前一个按钮工作得很好。那是我称之为form / create /而不是ajax所在的url。

请求ajax（不工作）和没有ajax（工作）的头。 http://snipt.org/AOC9

Answer 1

我从未使用FormData因此我不知道这是否是问题的根源。无论如何，我建议你将代码更改为：

$('#creation').on('submit', '#creation-form' , function (e) {
    e.preventDefault();

    var post_data = $(this).serialize();
    console.log('POST data:' + post_data);

    $.ajax({
      url: '/create/',
      data: post_data,
      type: "POST",
      success: function (resp) {
          console.log(resp);
          $('#creation').html(resp);
      },
      error: function (jqXHR, textStatus, errorThrown) {
          console.log(jqXHR);
          console.log(textStatus);
          console.log(errorThrown);
      }
      processData: false,
      contentType: false
    });
});

如果它不起作用，请检查控制台，你就会知道它为什么会自行失败。

使用Ajax的Django表单向导

1 个答案: