Descrizione rapida di AJAX
AJAX è semplicemente JSON o XML asincrono (nella maggior parte delle situazioni più recenti JSON). Poiché stiamo eseguendo un'attività ASYNC, probabilmente forniremo ai nostri utenti un'esperienza dell'interfaccia utente più piacevole. In questo caso specifico stiamo inviando un FORM utilizzando AJAX.
Molto velocemente ci sono 4 azioni di web generali GET, POST, PUT, e DELETE; questi corrispondono direttamente SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, e DELETING DATA. Un modulo web HTML / ASP.Net predefinito / PHP / Python o qualsiasi altra formazione è "invia", che è un'azione POST. Per questo motivo, quanto segue descriverà tutto come eseguire un POST. A volte, tuttavia, con http potresti volere un'azione diversa e probabilmente vorrai utilizzarla .ajax.
Il mio codice specifico per te (descritto nei commenti sul codice):
/* 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>
Documentazione
Dalla $.postdocumentazione del sito Web jQuery .
Esempio : inviare i dati del modulo utilizzando le richieste ajax
$.post("test.php", $("#testform").serialize());
Esempio : posta un modulo utilizzando ajax e inserisci i risultati in un div
<!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>
Nota importante
Senza utilizzare OAuth o almeno HTTPS (TLS / SSL), non utilizzare questo metodo per dati protetti (numeri di carta di credito, SSN, tutto ciò che è PCI, HIPAA o relativo all'accesso)