Descrição rápida de AJAX
AJAX é simplesmente JSON assíncrono ou XML (na maioria das situações mais recentes, JSON). Como estamos realizando uma tarefa ASYNC, provavelmente ofereceremos aos nossos usuários uma experiência de IU mais agradável. Neste caso específico, estamos fazendo um envio de FORM usando AJAX.
Muito rapidamente, há 4 acções web em geral GET, POST, PUT, e DELETE; estas correspondem directamente com SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, e DELETING DATA. Um formulário web / PHP / Python HTML / ASP.Net padrão ou qualquer outra formação é "enviar", que é uma ação POST. Por causa disso, a seguir todos descrevem como fazer um POST. Às vezes, no entanto, com http, você pode desejar uma ação diferente e provavelmente deseja utilitizar .ajax.
Meu código especificamente para você (descrito nos comentários do código):
/* 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>
Documentação
Da $.postdocumentação do site da jQuery .
Exemplo : enviar dados de formulário usando solicitações Ajax
$.post("test.php", $("#testform").serialize());
Exemplo : poste um formulário usando ajax e coloque os resultados em um 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
Sem usar OAuth ou no mínimo HTTPS (TLS / SSL), não use este método para dados seguros (números de cartão de crédito, SSN, qualquer coisa que seja PCI, HIPAA ou relacionado ao login)