از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
وقتی نوبت به افزایش تجربه کاربر می رسد روی برنامه های کاربردی وب، تماس های ناهمزمان از طریق AJAX پیشرفت زیادی کرده اند. یکی از زمینه‌هایی که AJAX واقعاً می‌درخشد، ارسال فرم است. در این بایت، روش استفاده از jQuery AJAX برای ارسال فرم ها را بررسی خواهیم کرد و در نتیجه یک تجربه کاربری یکپارچه ایجاد می کنیم.
AJAX چیست؟
AJAX مخفف “Asynchronous JavaScript and XML” است. این مجموعه ای از تکنیک های توسعه وب است که به وب اجازه می دهد page برای به روز رسانی و بازیابی داده ها از یک سرور به صورت ناهمزمان، بدون مسدود کردن نمایش آن page. در اصل، AJAX به صفحات وب اجازه می دهد تا به طور ناهمزمان با ارسال یا دریافت داده ها با سرور، بدون نیاز به به روز رسانی شوند. page بارگذاری مجدد
چرا از AJAX برای ارسال فرم استفاده کنیم؟
به طور سنتی، هنگامی که یک فرم ارسال می شود، page اطلاعات به روز شده را دوباره بارگذاری و نمایش می دهد. این می‌تواند تجربه‌ای دردناک برای کاربران باشد و همچنین می‌تواند ناکارآمد باشد، به خصوص اگر فقط بخش کوچکی از آن باشد page نیاز به به روز رسانی دارد. AJAX به ما این امکان را می دهد که فقط بخش های ضروری یک وب را به روز کنیم page، بدون نیاز به کامل page تازه کردن. این منجر به تجربه کاربری روانتر می شود و همچنین می تواند ذخیره کند روی پهنای باند
تنظیم فرم HTML
قبل از اینکه بتوانیم از AJAX برای ارسال فرم استفاده کنیم، به فرمی برای کار با آن نیاز داریم. برای این آموزش، از یک فرم تماس ساده استفاده خواهیم کرد. در اینجا کد HTML برای آن آمده است:
<form id="contactForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="text" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
این فرم دارای دو فیلد نام و ایمیل است. نکته مهمی که در اینجا باید به آن توجه کرد این است id ویژگی فرم که از آن برای هدف قرار دادن فرم با جی کوئری استفاده می کنیم.
نوشتن فراخوان jQuery AJAX
با تنظیم فرم ما، اکنون می‌توانیم فراخوانی jQuery AJAX را برای ارسال فرم بنویسیم. این کد برای انجام آن است:
$('#contactForm').submit(function(event) {
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url: 'submit_form.php',
type: 'POST',
data: form_data,
success: function(response) {
// Handle the response
},
error: function(error) {
// Handle the error
}
});
});
در این کد ابتدا از ارسال فرم به روش سنتی جلوگیری می کنیم event.preventDefault(). سپس داده های فرم را با استفاده از یک رشته کوئری سریال می کنیم $(this).serialize(). در نهایت، ما با استفاده از AJAX تماس برقرار می کنیم $.ajax()، ارسال URL برای ارسال فرم به آن، روش HTTP برای استفاده (POST در این مورد)، داده های فرم و دو فراخوان برای رسیدگی به سناریوهای موفقیت و خطا.
ارسال فرم با AJAX
بنابراین بیایید به روش ارسال فرم با استفاده از AJAX بپردازیم. هدف اصلی AJAX بهبود تجربه کاربر با به‌روزرسانی بخش‌هایی از وب است page بدون بارگیری مجدد کل page. برای این کار از jQuery استفاده می کنیم $.ajax() روش.
در اینجا مثالی از روش استفاده از AJAX برای ارسال فرم آورده شده است:
$("form").submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: "POST",
url: form.attr('action'),
data: form.serialize(),
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function(data){
console.log('An error occurred.');
console.log(data);
},
});
});
در این مثال، زمانی که فرم ارسال می شود، فراخوانی AJAX برقرار می شود. اگر فراخوانی AJAX موفقیت آمیز باشد، تابع موفقیت اجرا می شود، در غیر این صورت، تابع خطا اجرا می شود.
رسیدگی به خطا در ارسال فرم AJAX
رسیدگی به خطا بخش مهمی از هر درخواست از راه دور است. روش AJAX چندین گزینه برای مدیریت انواع مختلف خطاها فراهم می کند. در مثال قبلی از error تابع callback برای رسیدگی به خطاها.
همچنین می توانید کدهای وضعیت HTTP خاص را با استفاده از statusCode شی، مانند:
$.ajax({
type: "POST",
url: form.attr('action'),
data: form.serialize(),
statusCode: {
404: function() {
alert('page not found');
}
},
success: function(data){
console.log('Submission was successful.');
console.log(data);
},
error: function(data){
console.log('An error occurred.');
console.log(data);
},
});
در اینجا، اگر تماس AJAX یک کد وضعیت 404 را برگرداند، تابع داخل statusCode شی اجرا خواهد شد.
استفاده از AJAX با سایر عناصر فرم
می توانید از AJAX با سایر عناصر فرم نیز استفاده کنید. به عنوان مثال، می توانید از AJAX برای به روز رسانی a استفاده کنید <select> بر اساس لیست کشویی روی انتخاب لیست کشویی دیگری در اینجا یک مثال است:
$('select(name="country")').change(function() {
var countryID = $(this).val();
if(countryID) {
$.ajax({
url: '/getStates/'+countryID,
type: "GET",
dataType: "json",
success: function(data) {
$('select(name="state")').empty();
$.each(data, function(key, value) {
$('select(name="state")').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}else{
$('select(name="state")').empty();
}
});
اکنون، هنگامی که یک کشور انتخاب می شود، تماس AJAX با سرور برقرار می شود تا حالت های کشور انتخاب شده واکشی شود.
نتیجه
در این بایت، روش ارسال فرم با استفاده از AJAX، روش رسیدگی به خطاها در ارسال فرم AJAX، و روش استفاده از AJAX با سایر عناصر فرم را پوشش داده ایم. با استفاده از تماس‌های ناهمزمان مانند این، می‌توانیم تجربه کاربر را با به‌روزرسانی بخش‌هایی از وب بهبود دهیم page بدون بارگیری مجدد کل page. به یاد داشته باشید، رسیدگی به خطا بخش مهمی از هر درخواست AJAX برای اطمینان از استحکام برنامه شما است.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-31 08:17:05
