AJAXで送信されたフォームの後にdivを書き戻します。

Question

私は単純なフォームを持っており、データをajaxでデータベースに送信します。すべてがうまくいきます。フォームが提出された直後に、「完了」というテキストの警告メッセージが表示されます。

私の唯一の問題は、自分のdivが自動的に再読み込みされるようになっているため、ユーザーは警告メッセージから「OK」ボタンをクリックした直後に投稿結果を見ることができるということです。誰かが私がそれを達成する方法を教えてもらえますか？ここに私のコードです。

$(function() { 
    $('#form2').on(\"submit\", function(event) { 
     event.preventDefault(); 

     $.ajax({ 
      url: 'index.php', 
      type: 'post', 
      data: $(this).serialize(), 
      beforeSend: function(){ 
       $('#loading').show(); 
      }, 
      complete: function(){ 
       $('#loading').hide(); 
      }, 
      success: function() { 
       alert('Done'); 
      } 
     }); 
    }); 
}); 

<div id='refreshtodo'> 
    <form name='form2' id='form2' action='./index.php' method='post'> 
     <input type='text' class='big' name='duedate' size='10' maxlength='10' value='".date("d.m.Y")."'> 
     <input type='submit' class='btn btn-info btn-sm' role='button' value='add'> 
     <div id='loading' style='display:none;'> 
      <img src=\"./bootstrap/assets/images/spinner-loading-small.gif\" alt=\"Loading - Please wait...\" /> 
    </form> 
</div> 

DIV #refreshtodoは一度警告メッセージで[OK]をクリックし、再ロードする必要があります！

Answer 1

あなたは、あなたのindex.phpでのdivに表示する結果、たとえばecho必要があります。

：次に、あなたのjsの中であなただけのdiv #refreshtodoでPHPのページから返さ resultを印刷する必要があります

//your index code 
... 

echo "this is the result". 

を

.... 
success: function(result) { 
    alert('Done'); 
    $("#refreshtodo").html(result); 
} 

これが役に立ちます。

Answer 2

応答データをHTML（DOM）に挿入する必要があります。

これは代わりに

$(function() { 
    $('#form2').on(\"submit\", function(event) { 
     event.preventDefault(); 

     $.ajax({ 
      url: 'index.php', 
      type: 'post', 
      data: $(this).serialize(), 
      success: function(response) { 
       $('#refreshtodo').html(response); 
      } 
     }); 
    }); 
}); 

をJS試してみてくださいしかし、これはHTMLから自分のフォームを削除します。別のID（例：「＃todo-response」）を使用して2番目のdivを作成し、そこにレスポンスを表示することをおすすめします。

また、PHPスクリプトが表示したいHTMLコンテンツを返すようにする必要があります。

私は役立つことを願っています。

Answer 3

ajaxはフォームに入力したいものを返しますか？ HTMLかjson/xmlを返しますか？

それはHTML

success: function(data) { 
    alert('Done'); 
    $('#refreshtodo').html(data); 
} 

ならJSONは、手動でフォーム要素内の値にオブジェクトからのデータをマッピングするためにあなたを必要とします。

現在、#refresthtodoのすべてがフォームです。したがって、フォームをリセットするだけの場合：

var form = document.getElementById("form2"); 
form.reset();