Refresh div nach Formular einreichen mit AJAX

Question

Ich habe ein einfaches Formular und ich reiche die Daten in meine Datenbank mit Ajax. Alles funktioniert gut. Jetzt, nachdem das Formular abgeschickt wurde, erhalte ich eine Warnmeldung mit dem Text "Done".

Mein einziges Problem ist, dass mein div jetzt automatisch neu geladen werden sollte, so dass der Benutzer das gepostete Ergebnis sehen kann, nachdem er auf die Schaltfläche "OK" geklickt hat. Kann mir jemand sagen, wie ich das erreichen kann? Hier ist mein Code.

$(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> 

Die DIV #refreshtodo sollte, klickte einmal auf OK in Warnmeldung erneut geladen werden!

Answer 1

Sie sollten das Ergebnis echo Sie in der div in Ihrem index.php, Beispiel zeigen wollen:

//your index code 
... 

echo "this is the result". 

Dann in Ihrem js sollten Sie drucken nur die result von Ihrer PHP-Seite in den div #refreshtodo zurückgegeben:

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

Hoffe, das hilft.

Answer 2

Sie müssen Ihre Antwortdaten in das HTML (DOM) einfügen.

Versuchen Sie, diese

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

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

Dieses Formular jedoch aus dem HTML wird entfernen, anstatt JS. Ich würde empfehlen, ein zweites Div mit einer anderen ID (z. B. "# todo-response") zu erstellen und stattdessen die Antwort anzuzeigen.

Sie müssen auch sicherstellen, dass Ihr PHP-Skript den HTML-Inhalt zurückgibt, den Sie anzeigen möchten.

Ich hoffe, dass hilft.

Answer 3

Gibt Ihr ajax alles zurück, was Sie in das Formular eingeben möchten? Gibt es HTML oder JSON/Xml zurück?

Wenn es HTML ist

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

JSON müssten Sie manuell in Ihrer Formularelemente auf die Werte aus dem Objektdaten abzubilden.

Derzeit ist alles, was Sie in Ihrem #refresthtodo haben, ein Formular. Wenn Sie also nur das Formular zurücksetzen möchten:

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