与Ajax的Django窗体向导

问题描述：

我想通过Ajax使用窗体向导。我有一个分开的模板，当用户想要开始使用表单时，首先加载它。然后通过ajax重新加载，直到完成。与Ajax的Django窗体向导

首先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所在的网址。

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

答

我从来没有用过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 
    }); 
});

如果它不工作，检查控制台，你就会知道失败的原因你自己。

谢谢。也许我在这方面有点新，以找出问题所在。我认为我错过了一些东西，第二步表单显示两个按钮，一个向前，一个向后。但我的jQuery没有对提交做任何改变（我也试着用第二个函数做第二个'on'函数）。我比较了一个由ajax加载的表单和一个直接来自url的表单，两者都是相同的。前一个按钮如何告诉Django我想要什么？即使没有使用ajax，我也不会通过直接url获取它。所有的发布数据都是一样的。 – user1846407

所以我建议你使用'点击'事件而不是'提交'。你可以添加一些id到你的按钮，然后在jQuery中使用$（'＃creation'）。on（'click '，'＃js-nextBtn'，函数（e）...'，其余部分应该几乎相同 –

它也不工作，也许会话数据是问题，因为它没有更新？ – user1846407

与Ajax的Django窗体向导

相关推荐