us12
March 13th, 2014, 00:59
همانطور که در مقاله قبلی با مقدمه استفاده از جی کوئری آشنا شدید و مقدمه کار کردن را آموختید اکنون سعی دارم یک مفهوم خیلی مهم در برنامه نویسی تحت وب را با استفاده از کلاس جی کوئری به شکل خیلی ساده بیان کنم.
مقدمه :
حتما در وب گردی بسیار سایت ها را دیده اید که بدون نیاز به ریفرش شدن عملیات های سرور انجام می دهند . مثلا سایتهایی که فقط با تایپ در قسمت سرچ آنها شروع به جستجو محتوای سایت میکنند و نتایج را نمایش می دهند و یا سایتهایی که با تایپ یک
متن
و زدن کلید ارسال بدون نیاز به لود شدن و ریفرش شدن صفحه متن در دیتابیس ذخیره می شود . این سایتها از تکنولوژی به نام آی جکس Ajax استفاده میکنند .
در این مثال سعی داریم یک فرم تماس با ما را که از فیلد های نام ، ایمیل و شماره تلفن تشکیل شده است را با تکنولوژی Ajax به سرور ارسال کنیم .
قدم اول : ساخت فرم HTML
توجه کنید که در قسمت اکشن فرم هیچ آدرس وارد نشده است !
با کمی سلیقه و استفاده از CSS می توانید فرمی به شکل زیر داشته باشید
قدم بعدی : دانلود و اضافه کردن کتابخانه جی کوئری به کدها می باشد .
مراجعه شود به مقاله مقدمه ای بر جی کوئری – قسمت اول (http://www.softiran.org/article/27/learning-jquery-part1.html)
ما قصد داریم وقتی روی کلید ارسال کلیک شود این عملیات انجام شود پس نیاز به رویدادی برای کلیک خواهیم بود.
قدم سوم : معتبر سازی مقادیر وارد شده توسط کاربر
همانگونه که میدانید کاربران ممکن است اطلاعاتی را به شکلی که ما نیاز داریم وارد نکند به عنوان مثال وارد کردن ایمیل بدون علامت @ و یا شماره تلفن کمتر و بیشتر از فرمت عادی . برای این کار 2 نوع عملیات میتوان انجام داد . 1 وقتی اطلاعات به سرور ارسال شد توسط کد های پی اچ پی این اطلاعات را مدیریت کنیم 2 قبل از ارسال شدن اطلاعات آنها را توسط کد های جاواسکریپت و کتابخانه جی کوئری بررسی کنیم.
البته باید این نکته را بدانید همیشه در قسمت سرور هم اطلاعات را مدیریت کنید و با بررسی اطلاعات سمت کاربر با جاوااسکریپت احتمال خطا را کم میکنید و فشارها ی بیهوده روی سرور را کم میکنید.
برای معتبر سازی ما از کد های زیر استفاده میکنیم :
که همانطور که ملاحظه میکنید چون مقاله ابتدایی است فقط خالی و پر بودن فیلد های بررسی شده است.
قدم چهارم : پردازش اطلاعات و ارسال اطلاعات توسط Ajax
قلب این مقاله در این قسمت می باشد و هدف کل این مقاله در خصوص این تکنولوژی می باشد .
پس از معتبر سازی مقدارهای وارد شده حالا نوبت این رسیده است که اطلاعات در پس زمینه و به دور از چشم کاربر به سرور ارسال شود .
تابع Ajax در جی کوئری چند قسمت دارد به شکل مختصر موارد مهم آن به شرح زیر است :
Type : بیانگر نوع ارسال اطلاعات می باشد که همانطور که میدانید نوع های مثل POST و GET وجود دارد .
url : آدرس فایل پی اچ پی که اطلاعات به آن ارسال میشود.
Data : داده هایی که باید ارسال شود ( نوع و چینش این اطلاعات متفاوت می تواند باشد به شکل آرایه یا یک رشته پیوسته می توان اطلاعات را ارسال کرد که در این مثال ما از نوع رشته پیوسته استفاده کرده ایم )
Success : تابع و اتفاقی که باید در هنگام موفقیت آمیز بودن ارسال انجام شود.
قدم آخر : مدیریت اطلاعات ارسال به فایل PHP
اطلاعات ارسال را بسته به نوع ارسال (POST یا GET) در پی اچ پی به سادگی میتوان دریافت کرد مانند کد زیر :
منبع :
گروه برنامه نویسی سافت ایران | ارسال یک فرم بدون ریفرش شدن صفحه ( Ajax ) (http://www.softiran.org/article/29/submit-form-without-page-refresh-ajax.html)
کدهای کامل در منبع موجود است.
مقدمه :
حتما در وب گردی بسیار سایت ها را دیده اید که بدون نیاز به ریفرش شدن عملیات های سرور انجام می دهند . مثلا سایتهایی که فقط با تایپ در قسمت سرچ آنها شروع به جستجو محتوای سایت میکنند و نتایج را نمایش می دهند و یا سایتهایی که با تایپ یک
متن
و زدن کلید ارسال بدون نیاز به لود شدن و ریفرش شدن صفحه متن در دیتابیس ذخیره می شود . این سایتها از تکنولوژی به نام آی جکس Ajax استفاده میکنند .
در این مثال سعی داریم یک فرم تماس با ما را که از فیلد های نام ، ایمیل و شماره تلفن تشکیل شده است را با تکنولوژی Ajax به سرور ارسال کنیم .
قدم اول : ساخت فرم HTML
توجه کنید که در قسمت اکشن فرم هیچ آدرس وارد نشده است !
با کمی سلیقه و استفاده از CSS می توانید فرمی به شکل زیر داشته باشید
قدم بعدی : دانلود و اضافه کردن کتابخانه جی کوئری به کدها می باشد .
مراجعه شود به مقاله مقدمه ای بر جی کوئری – قسمت اول (http://www.softiran.org/article/27/learning-jquery-part1.html)
ما قصد داریم وقتی روی کلید ارسال کلیک شود این عملیات انجام شود پس نیاز به رویدادی برای کلیک خواهیم بود.
قدم سوم : معتبر سازی مقادیر وارد شده توسط کاربر
همانگونه که میدانید کاربران ممکن است اطلاعاتی را به شکلی که ما نیاز داریم وارد نکند به عنوان مثال وارد کردن ایمیل بدون علامت @ و یا شماره تلفن کمتر و بیشتر از فرمت عادی . برای این کار 2 نوع عملیات میتوان انجام داد . 1 وقتی اطلاعات به سرور ارسال شد توسط کد های پی اچ پی این اطلاعات را مدیریت کنیم 2 قبل از ارسال شدن اطلاعات آنها را توسط کد های جاواسکریپت و کتابخانه جی کوئری بررسی کنیم.
البته باید این نکته را بدانید همیشه در قسمت سرور هم اطلاعات را مدیریت کنید و با بررسی اطلاعات سمت کاربر با جاوااسکریپت احتمال خطا را کم میکنید و فشارها ی بیهوده روی سرور را کم میکنید.
برای معتبر سازی ما از کد های زیر استفاده میکنیم :
که همانطور که ملاحظه میکنید چون مقاله ابتدایی است فقط خالی و پر بودن فیلد های بررسی شده است.
قدم چهارم : پردازش اطلاعات و ارسال اطلاعات توسط Ajax
قلب این مقاله در این قسمت می باشد و هدف کل این مقاله در خصوص این تکنولوژی می باشد .
پس از معتبر سازی مقدارهای وارد شده حالا نوبت این رسیده است که اطلاعات در پس زمینه و به دور از چشم کاربر به سرور ارسال شود .
تابع Ajax در جی کوئری چند قسمت دارد به شکل مختصر موارد مهم آن به شرح زیر است :
Type : بیانگر نوع ارسال اطلاعات می باشد که همانطور که میدانید نوع های مثل POST و GET وجود دارد .
url : آدرس فایل پی اچ پی که اطلاعات به آن ارسال میشود.
Data : داده هایی که باید ارسال شود ( نوع و چینش این اطلاعات متفاوت می تواند باشد به شکل آرایه یا یک رشته پیوسته می توان اطلاعات را ارسال کرد که در این مثال ما از نوع رشته پیوسته استفاده کرده ایم )
Success : تابع و اتفاقی که باید در هنگام موفقیت آمیز بودن ارسال انجام شود.
قدم آخر : مدیریت اطلاعات ارسال به فایل PHP
اطلاعات ارسال را بسته به نوع ارسال (POST یا GET) در پی اچ پی به سادگی میتوان دریافت کرد مانند کد زیر :
منبع :
گروه برنامه نویسی سافت ایران | ارسال یک فرم بدون ریفرش شدن صفحه ( Ajax ) (http://www.softiran.org/article/29/submit-form-without-page-refresh-ajax.html)
کدهای کامل در منبع موجود است.