Mô tả nhanh về AJAX
AJAX chỉ đơn giản là JSON không đồng bộ hoặc XML (trong hầu hết các tình huống mới hơn là JSON). Vì chúng tôi đang thực hiện tác vụ ASYNC, chúng tôi có thể sẽ cung cấp cho người dùng trải nghiệm UI thú vị hơn. Trong trường hợp cụ thể này, chúng tôi đang thực hiện gửi MẪU bằng AJAX.
Thực sự nhanh chóng có 4 hành động web nói chung GET, POST, PUT, và DELETE; những tương ứng trực tiếp với SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, và DELETING DATA. Biểu mẫu web HTML / ASP.Net mặc định / PHP / Python hoặc bất kỳ formhành động nào khác là "gửi" là hành động ĐĂNG. Bởi vì điều này, tất cả bên dưới sẽ mô tả việc thực hiện một ĐĂNG. Tuy nhiên, đôi khi với http, bạn có thể muốn một hành động khác và có thể sẽ muốn tận dụng .ajax.
Mã của tôi dành riêng cho bạn (được mô tả trong phần nhận xét mã):
/* 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>
Tài liệu
Từ $.posttài liệu trang web jQuery .
Ví dụ : Gửi dữ liệu biểu mẫu bằng yêu cầu ajax
$.post("test.php", $("#testform").serialize());
Ví dụ : Đăng biểu mẫu bằng ajax và đặt kết quả vào một 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>
Lưu ý quan trọng
Nếu không sử dụng OAuth hoặc tối thiểu HTTPS (TLS / SSL), vui lòng không sử dụng phương pháp này cho dữ liệu an toàn (số thẻ tín dụng, SSN, bất kỳ thứ gì liên quan đến PCI, HIPAA hoặc đăng nhập)