3

我正在尝试通过 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 时，前一个按钮工作得很好。那是当我将其称为 /create/ 而不是 ajax 所在的 url 时。

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

4

1 回答 1

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
    });
});

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

于 2013-07-25T19:54:42.230 回答