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 を呼び出すと、前のボタンが正常に機能するため、すべてのコードを含めていません。それは、ajax がある URL ではなく、フォーム /create/ と呼ぶときです。

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 に答える