تبلیغات
Fact World - ارسال اطلاعات فرم با آژاکس (ajax) و نمایش پیام در حال پردازش (loading)

آموزش برنامه نویسی و مهارتهای وب

article 

ارسال اطلاعات فرم با آژاکس (ajax) و نمایش پیام در حال پردازش (loading)

ajax در آموزش های مقدماتی آژاکس (ajax)، گفتیم که چگونه می توان اطلاعات یک فرم را با متد post برای یک فایل php ارسال کرد و نتایج حاصل از پردازش آنها را بدون رفرش شدن صفحه به کاربر نشان داد، در این مطلب می خواهیم کمی از تئوری فاصله بگیریم و کدی کاربردی را قرار دهیم که به کمک آن بدون استفاده از کتابخانه های حجیم جی کئوری (jquery) و دردسرهایش، تنها بر مبنای آژاکس، اطلاعات یک فرم را به صورت پیشرفته ارسال کنیم و علاوه بر آن، حالت در حال پردازش یا loading را نیز با تصویر و متن نشان دهیم.
برای ارسال و دریافت اطلاعات از یک فرم html به توابعی نیاز داریم که علاوه بر روش های عادی ajax، بتوانیم پردازش و کنترل بیشتری بر روی فرایندها داشته باشیم؛ کد زیر نمونه تقریبا کاملی است.

فایل php جهت دریافت درخواست آژاکسی


با استفاده از کدهای php زیر، مقادیر ارسال شده از درخواست مبتنی بر آژاکس را دریافت و خروجی را به عنوان پاسخ، ارسال می کنیم.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$choose = $_POST['choose'];
$check = $_POST['check'];
echo "نام شما: $name <br />";
echo "پست الکترونیک شما: $email<br />";
echo "شماره انتخاب شده: $choose<br />";
echo "وضعیت تایید: $check<br />";
?>

کد html و تنظیمات آژاکسی


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ارسال و دریافت اطلاعات با متد post و فرم html</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
label{
    width:100px;
    display:inline-block;
}
</style>
<script type="text/javascript">
//<![CDATA[
var div = 'showresult';
var loadingmessage = '<img src="loading.gif" alt="loading" height="16" width="16" /> لطفا کمی صبر کنید...';
function Ajaxrequest(){
    var xmlHttp;
    try{
        // Firefox, Opera 8.0+, Safari    
        xmlHttp=new XMLHttpRequest();
        return xmlHttp;
        }
        catch (e){
            try{
                // Internet Explorer    
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                return xmlHttp;
                }
                catch (e){
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        return xmlHttp;
                        }
                        catch (e){
                            alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
                            return false;
            }
        }
    }
}
function formget(form, url) {
    var poststr = getFormValues(form);
    postData(url, poststr);
}
function postData(url, parameters){
    var xmlHttp = Ajaxrequest();
    xmlHttp.onreadystatechange =  function(){
        if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
            document.getElementById(div).innerHTML=loadingmessage;
            }
            if (xmlHttp.readyState == 4) {
                document.getElementById(div).innerHTML=xmlHttp.responseText;
                }
                }
                xmlHttp.open("POST", url, true);
                xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlHttp.setRequestHeader("Content-length", parameters.length);
                xmlHttp.setRequestHeader("Connection", "close");
                xmlHttp.send(parameters);
}
function getFormValues(formobj)
{
    var str = "";
    var valueArr = null;
    var val = "";
    var cmd = "";
    for(var i = 0;i < formobj.elements.length;i++)
    {
        switch(formobj.elements[i].type)
        {
            case "text":
            str += formobj.elements[i].name +
            "=" + encodeURI(formobj.elements[i].value) + "&";
            break;
            case "textarea":
            str += formobj.elements[i].name +
            "=" + encodeURI(formobj.elements[i].value) + "&";
            break;
            case "select-one":
            str += formobj.elements[i].name +
            "=" + formobj.elements[i].options[formobj.elements[i].selectedIndex].value + "&";
            break;
            case "checkbox":
            if(formobj.elements[i].checked == true){
                str += formobj.elements[i].name +
                "=" + formobj.elements[i].value + "&";
            }
            break;
            }
        }
str = str.substr(0,(str.length - 1));
return str;
}
//]]>
</script>
</head>
<body>
<form action="#">
<label for="name">نام: </label>
<input id="name" type="text" name="name" size="20" value="webgoo" />
<br /><br />
<label for="email">پست الکترونیک: </label>
<input id="email" type="text" name="email" size="20" value="info[at]webgoo.ir" />
<br /><br />
<label for="choose">انتخاب شماره: </label>
<select name="choose" id="choose">
<option value="1">1</option>
<option value="2">2</option>
</select>
<br /><br />
<label for="check">تایید: </label>
<input type="checkbox" name="check" id="check" value="تایید شده" />
<br />
<input type="button" name="Send" value="ارسال" onclick="formget(this.form, 'ajax-post-form.php');" />
</form>
<div id="showresult"></div>
<hr />
اطلاعات فرم با استفاده از ترکیب آژاکس و جاوا اسکریپت به سرور ارسال می شوند.
</body>
</html>
پیش نمایش
توضیح:
- در کد بالا اطلاعات به فایلی به نام ajax-post-form.php ارسال و نتایج از آن دریافت می شود؛ در طی این فرایند متغیر loadingmessage در حالت بین صفر تا 4 از xmlHttp.readyState اجرا می شود و یک پیام مبنی بر در حال پردازش به همراه تصویر نشان داده می شود.
- تابع Ajaxrequest برای ارسال درخواست آژاکسی است که با مرورگرهای مختلف سازگار شده و نهایتا اگر سیستم کاربر نتواند درخواست را ارسال کند پیامی به او مبنی بر پشتیبانی نکردن مرورگرش از آژاکس نشان داده خواهد شد.
- متدی که در کد اسفاده شده، متد post است.
- تابع getFormValues اطلاعات فرم را پردازش و در خود نگهداری می کند و در تابع formget مجددا به عنوان پارامتر در تابعی دیگر با نام postData و متغیر poststr ذخیره می شود که از آن در قسمت xmlHttp.send جهت ارسال اطلاعات استفاده می کنیم.
- برای سازگاری و جلوگیری از مشکلات احتمالی در ارسال اطلاعات فرم از طریق آژاکس با زبان فارسی، از تابع encodeURI استفاده کرده ایم، این تابع مقادیر فیلدها را به صورت کاراکترهای استاندارد utf8 تبدیل می کند.
هر چند در نگاه اول ممکن است کمی پیچیده به نظر برسد، اما اگر از ابتدا و کم کم با جاوا اسکریپت و آژاکس آشنا شویم، خواهیم دید که آنقدر هم سخت نیست؛ از طرفی نیازی نیست که حتما تسلط کامل روی ajax داشته باشیم، همین که بتوانیم نحوه پردازش کدها و ایجاد تغییرات دلخواه را بیاموزیم، به نظر کافی است.
section دسته بندی: آموزش کاربردی - آموزش کاربردی Ajax -


یکشنبه 13 مهر 1393

نظرات ()


جمعه 24 شهریور 1396 11:13 ق.ظ
Hi there just wanted to give you a quick heads
up and let you know a few of the images aren't loading correctly.

I'm not sure why but I think its a linking issue.

I've tried it in two different internet browsers and both show the same outcome.
دوشنبه 4 اردیبهشت 1396 10:01 ق.ظ
BHW
We're a group of volunteers and opening a new scheme in our community.
Your site offered us with helpful information to work
on. You've done a formidable process and
our entire neighborhood will likely be grateful to you.
جمعه 1 اردیبهشت 1396 09:58 ب.ظ
BHW
Greetings from Idaho! I'm bored to death at work so I decided to check out your blog on my iphone during lunch break.

I really like the information you provide here and can't wait to take a look when I get home.
I'm shocked at how quick your blog loaded on my mobile ..
I'm not even using WIFI, just 3G .. Anyhow, great blog!

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )