AJAX का त्वरित विवरण
AJAX बस एसिंक्रोनस JSON या XML है (अधिकांश नई स्थितियों में JSON)। क्योंकि हम एक ASYNC कार्य कर रहे हैं, हम संभवतः अपने उपयोगकर्ताओं को अधिक सुखद UI अनुभव प्रदान करेंगे। इस विशिष्ट मामले में हम AJAX का उपयोग करके एक FORM सबमिशन कर रहे हैं।
सच में जल्दी से वहाँ 4 सामान्य वेब कार्रवाई कर रहे हैं GET, POST, PUT, और DELETE; इन के साथ सीधे अनुरूप SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, और DELETING DATA। एक डिफ़ॉल्ट HTML / ASP.Net वेबफॉर्म / PHP / पायथन या कोई अन्य 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 का उपयोग करके एक फॉर्म पोस्ट करें और परिणाम को 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>
महत्वपूर्ण लेख
OAuth या न्यूनतम HTTPS (TLS / SSL) का उपयोग किए बिना कृपया सुरक्षित डेटा (क्रेडिट कार्ड नंबर, SSN, कुछ भी जो PCI, HIPAA या लॉगिन से संबंधित है) के लिए इस पद्धति का उपयोग न करें