Kurzbeschreibung von AJAX
AJAX ist einfach asynchrones JSON oder XML (in den meisten neueren Situationen JSON). Da wir eine ASYNC-Aufgabe ausführen, werden wir unseren Benutzern wahrscheinlich eine angenehmere Benutzeroberfläche bieten. In diesem speziellen Fall führen wir eine FORM-Übermittlung mit AJAX durch.
Wirklich schnell gibt es 4 allgemeine Web - Aktionen GET, POST, PUT, und DELETE; diese entsprechen direkt mit SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, und DELETING DATA. Ein Standard-HTML / ASP.Net-Webformular / PHP / Python oder eine andere formAktion ist das " Senden ", bei dem es sich um eine POST-Aktion handelt. Aus diesem Grund wird im Folgenden beschrieben, wie ein POST durchgeführt wird. Manchmal möchten Sie jedoch mit http möglicherweise eine andere Aktion und möchten diese wahrscheinlich nutzen .ajax.
Mein Code speziell für Sie (beschrieben in Codekommentaren):
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $(this),
url = $form.attr('action');
/* Send the data using post with element id name and name2*/
var posting = $.post(url, {
name: $('#name').val(),
name2: $('#name2').val()
});
/* Alerts the results */
posting.done(function(data) {
$('#result').text('success');
});
posting.fail(function() {
$('#result').text('failed');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formoid" action="studentFormInsert.php" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label class="title">Last Name</label>
<input type="text" id="name2" name="name2">
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<div id="result"></div>
Dokumentation
Aus der $.postDokumentation der jQuery-Website .
Beispiel : Senden Sie Formulardaten mit Ajax-Anforderungen
$.post("test.php", $("#testform").serialize());
Beispiel : Veröffentlichen Sie ein Formular mit Ajax und geben Sie die Ergebnisse in ein div ein
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search..." />
<input type="submit" value="Search" />
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
/* attach a submit handler to the form */
$("#searchForm").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $(this),
term = $form.find('input[name="s"]').val(),
url = $form.attr('action');
/* Send the data using post */
var posting = $.post(url, {
s: term
});
/* Put the results in a div */
posting.done(function(data) {
var content = $(data).find('#content');
$("#result").empty().append(content);
});
});
</script>
</body>
</html>
Wichtige Notiz
Verwenden Sie diese Methode ohne Verwendung von OAuth oder mindestens HTTPS (TLS / SSL) nicht für sichere Daten (Kreditkartennummern, SSN, PCI, HIPAA oder Login).