Laden einer PHP-Datei in div mit Ajax

Question

Ich bin seit ein paar Tagen auf ein Projekt fest, und der Teil, den ich tun muss, bin ich verloren.

Ich versuche, eine .php-Datei zu erhalten, die nur ein Formular enthält, das mit AJAX in ein div geladen werden soll. Ich habe alle alten Beiträge recherchiert, und alles, was ich versucht habe, funktioniert einfach nicht, und die Beispiele haben mich in einigen Aspekten verwirrter gemacht. Ich benutze XAMPP und habe es so, dass sich ein Benutzer über die DB anmelden muss und zu seinem Profil gelangt. Wenn sie im Profil sind, können sie auf "Add a to-do" klicken und es sollte ein Formular auftauchen, das sich in toDoForm.php befindet.

profile.php

<div class="col s4"> 
    <button id="loadToDoForm" type="submit">Add a To-Do</button> 
</div> 
<div id="toDoFormShow"> 
    // toDoForm.php goes here on button click 
</div> 

toDoForm.php

<form class="col s12"> 
    <div class="row"> 
     <div class="input-field col s6"> 
      <input placeholder="Placeholder" id="first_name" type="text" class="validate"> 
      <label for="first_name">First Name</label> 
     </div> 
     <div class="input-field col s6"> 
      <input id="last_name" type="text" class="validate"> 
      <label for="last_name">Last Name</label> 
     </div> 
    </div> 
</form> 

Hier ist, wo ich versuche, Ajax auf die Schaltfläche ausführen klicken

script.js

$(document).ready(function(){ 

    $('#loadToDoForm').click(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "toDoForm.php", 
      // url: "views/toDoForm.php", 
      data: datas, 
      cache: false, 
      success: function(html){ 
      } 
     }); 
    }); 

}); 

Answer 1

Wie wäre es mit einer jQuery-Lösung, wie Sie sie ohnehin verwenden? Sie brauchen dafür nicht wirklich Server-Seite.

Sie können dies für viele verschiedene Bereiche Ihrer Website verwenden.

Erstellen Sie eine Datei mit dem Namen z. siteTemplates.html - dies wird Vorlagenabschnitte halten, z.B. Ihre Form

Formular html hinzufügen und es eine ID geben:

<form class="col s12" id="myFormTemplate"><!-- notice ID --> 
    <div class="row"> 
     <div class="input-field col s6"> 
      <input placeholder="Placeholder" id="first_name" type="text" class="validate"> 
      <label for="first_name">First Name</label> 
     </div> 
     <div class="input-field col s6"> 
      <input id="last_name" type="text" class="validate"> 
      <label for="last_name">Last Name</label> 
     </div> 
    </div> 
</form> 

Funktion, um die Vorlage zu laden

loadTemplate(containerID, templateID){ 
    var myContainer = $('#' + containerID); // cache the container 
    /* load just the section you need by specifying id within templates file */ 
    myContainer.load('/siteTemplates.html #' + templateID); 
} 

Dann rufen Sie die Funktion auf Klick

$('#loadToDoForm').click(loadTemplate('toDoFormShow', 'myFormTemplate')) 

Dies ist ungetestet aber sollte dir einen Startblock geben