এজেএক্সের দ্রুত বর্ণনা
এজেএক্স হ'ল এসিনক্রোনাস জেএসএন বা এক্সএমএল (বেশিরভাগ নতুন পরিস্থিতিতে জেএসওএন)। যেহেতু আমরা একটি এএসওয়াইএনসি কাজ করছি আমরা সম্ভবত আমাদের ব্যবহারকারীদের আরও উপভোগ্য ইউআই অভিজ্ঞতা সরবরাহ করব। এই নির্দিষ্ট ক্ষেত্রে আমরা এজ্যাক্স ব্যবহার করে একটি ফর্ম জমা দিচ্ছি।
সত্যিই দ্রুত সেখানে 4 সাধারণ ওয়েব পদক্ষেপ নেওয়ার GET, POST, PUT, এবং DELETE; এই সরাসরি সঙ্গে সংগতিপূর্ণ SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, এবং DELETING DATA। একটি ডিফল্ট এইচটিএমএল / এএসপি. নেট ওয়েবফর্ম / পিএইচপি / পাইথন বা অন্য কোনও ক্রিয়াকলাপ form"জমা দেওয়া" যা একটি পোষ্ট ক্রিয়া। এর কারণে নীচে সমস্ত একটি পোষ্ট করা বর্ণনা করবে। কখনও কখনও তবে 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ডকুমেন্টেশন থেকে।
উদাহরণ : এজাক্স অনুরোধগুলি ব্যবহার করে ফর্ম ডেটা প্রেরণ করুন
$.post("test.php", $("#testform").serialize());
উদাহরণ : এজাক্স ব্যবহার করে একটি ফর্ম পোস্ট করুন এবং ফলাফলকে একটি ডিভিতে রাখুন
<!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>
গুরুত্বপূর্ণ তথ্য
ওআউথ ব্যবহার না করে বা সর্বনিম্ন এইচটিটিপিএস (টিএলএস / এসএসএল) ব্যবহার না করে দয়া করে সুরক্ষিত ডেটা (ক্রেডিট কার্ড নম্বর, এসএসএন, পিসিআই, এইচআইপিএ, বা লগইন সম্পর্কিত যে কোনও কিছু) জন্য এই পদ্ধতিটি ব্যবহার করবেন না please