AJAX'ın Hızlı Tanımı
AJAX, Asyncronous JSON veya XML'dir (çoğu yeni durumda JSON). Bir ASYNC görevi yaptığımız için, kullanıcılarımıza daha keyifli bir UI deneyimi sunacağız. Bu özel durumda AJAX kullanarak bir FORM gönderimi yapıyoruz.
Gerçekten hızlı 4 genel web işlem vardır GET, POST, PUTve DELETE; Bu doğrudan karşılık SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, ve DELETING DATA. Varsayılan bir HTML / ASP.Net web formu / PHP / Python veya diğer herhangi bir formeylem, bir POST eylemi olan "göndermektir". Bu nedenle, aşağıdakilerin tümü bir POST yapmayı açıklayacaktır. Ancak bazen http ile farklı bir eylem isteyebilir ve muhtemelen yararlanmak isteyebilirsiniz .ajax.
Kodum özellikle sizin için (kod yorumlarında açıklanmıştır):
/* 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>
Dokümantasyon
JQuery web sitesi $.postbelgelerinden.
Örnek : Form verilerini ajax isteklerini kullanarak gönderin
$.post("test.php", $("#testform").serialize());
Örnek : Ajax kullanarak bir form gönderin ve sonuçları bir div'e koyun
<!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>
Önemli Not
OAuth kullanmadan veya minimum HTTPS (TLS / SSL) kullanmadan lütfen bu yöntemi güvenli veriler için kullanmayın (kredi kartı numaraları, SSN, PCI, HIPAA veya oturum açma ile ilgili herhangi bir şey)