AJAXを使用してフォームを送信

Question

私はPython APIを開発しました。これをダウンロードしたHTMLテンプレートと統合しています。これは、アルバム名とアーティスト名を受け入れるためのフォームを持つシンプルな1ページのHTMLテンプレートです。私はAJAXを使ってフォームを処理しようとしています。フォームが正常に送信されると、APIによって返されたメッセージに置き換えられます。

（簡体字）のHTMLスニペットがある：

<div class="form"> 
    <form role="form" action="form.php" id="signup"> 
     <div class="form-group"> 
      <label>Artist Name</label> 
      <input type="text" name="artist" id="artist"> 
     </div> 
     <div class="form-group"> 
      <label>Tracking Number</label> 
      <input type="text" name="album" class="album"> 
     </div> 
     <button type="submit" class="btn">Submit!</button> 
    </form> 
</div> 

その後、私は、私はhtmlファイルの先頭でインポートJSファイルを持っています。以下はJSファイルです。

$(function() { 
    var form = $('#signup'); 

    var formMessages = $('#form-messages'); 

    $(form).submit(function(e) { 
     e.preventDefault(); 
     var formData = { 
      'artist' : $('input[name=artist]').val(), 
      'album'    : $('input[name=album]').val(), 
     }; 

     // process the form 
     $.ajax({ 
      type  : 'POST', 
      url   : 'form.php', 
      data  : formData, 
      dataType : 'json' 
    }) 
     .done(function(data) { 
       var content = $(data).find('#content'); 
       $("#result").empty().append(content); 
      }); 
}); 

が、私は問題はしかし.done(function(data))であると思いますが、私は上のコードを発見したウェブサイトは明確ではありませんでした。

form.phpはJSON文字列を返します。フォームを使用する瞬間、Python APIに情報が送信され、Python APIはJSONメッセージを返します。しかし、私はJSONメッセージにアクセスすることはできません。それは含まれています

'code': X, 'message':'returned messaged...' 

私は理想的に私はif/else文をしたいと思います。したがって

if code = 1: 
    display: Success 

などですが、私はPHP/JSでどこから始めるべきか分かりません。

Answer 1

他のいくつかのスタックオーバーフローの回答と別のWebサイトを見て、最終的にそれを稼働させることができました。

は私が作るために、フォームの終了前にボタンの下にhtmlファイルに1つのdiv要素を追加しました：

<form> 
    ... 
    ... 
    <button type="submit" class="btn">Submit!</button> 
    <div id="thanks" style="display:none;"></div> 
</form> 

を次に、JSファイルに私がするの.done（機能（データを））改正しました：

.done(function(data) { 
      if (data.result == '1') { 
       $('#thanks').show().text("Success!"); 
       $('input[type="text"],text').val(''); 
      } else if (data.result == '2') { 
       $('#thanks').show().text("Album and Artist already exists"); 
      } else { 
       $('#thanks').show().text("Uh Oh. Something has gone wrong. Please try again later or contact me for more help"); 
      } 
     });