Короткий опис AJAX
AJAX - це просто асинхронний JSON або XML (у більшості нових ситуацій JSON). Оскільки ми виконуємо завдання ASYNC, ми, швидше за все, надамо своїм користувачам приємніший інтерфейс користувача. У цьому конкретному випадку ми робимо форму подання за допомогою AJAX.
Дійсно швидко є 4 загальні веб - дії GET, POST, PUT, і DELETE; вони безпосередньо відповідаютьSELECT/Retreiving DATA , INSERTING DATA, UPDATING/UPSERTING DATAі DELETING DATA. За замовчуванням веб-форма HTML / ASP.Net / PHP / Python або будь-яка інша formдія - це "подати", що є дією POST. Через це внизу все буде описано виконання POST. Однак іноді за допомогою http ви можете захотіти іншої дії і, ймовірно, захочете скористатися .ajax.
Мій код спеціально для вас (описаний у коментарях до коду):
/* 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>
Документація
З веб-сайту jQuery $.post документації на .
Приклад : Надіслати дані форми, використовуючи запити ajax
$.post("test.php", $("#testform").serialize());
Приклад : Опублікуйте форму за допомогою ajax і введіть результати в діл
<!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>
Важлива примітка
Не використовуючи OAuth або мінімум HTTPS (TLS / SSL), будь ласка, не використовуйте цей метод для захищених даних (номери кредитних карт, SSN, будь-що, що стосується PCI, HIPAA або входу)