/ در آموزش جی کوئری, آموزش ها, اشتراک رایگان / توسط
آخرین زمان ویرایش:

آموزش جامع و کامل جی کوئری بخش دهم

جهت مطالعه به ادامه مطلب مراجعه فرمائید

Ajax در Jquery چگونه است ؟

Ajax مختصر شده عبارت Asynchronous JavaScript and XML میباشد .

این تکنولوژی اولین بار برای استفاده از داده های Xml در جاوا اسکریپت ایجاد شد.Ajax یک زبان برنامه نویسی نیست . بلکه تکنولوژی برای ارتباط با سرور از طریق جاوااسکریپت و ایجاد صفحات داینامیک میباشد .

ایجاکس در jquery

در jquery توابعی برای کار با ایجاکس وجود دارد که کار را با این تکنولوژی بسیار آسان نموده است . توسط این توابع میتوان تبادل اطلاعات را با سرور بصورت TXT , HTML , XML و JASON و با استفاده از دو متد GET و POST انجام داد .و شما میتوانید اطلاعات نتیجه که از سرور بدست می آید را در عنصر انتخابی (selector) به نمایش در آورید

متد Get و Post ای جکس در جی کوئری متد get در jQuery

متد get، با استفاده از یک درخواست HTTP GET ، اطلاعات مورد نظر را از سرور می خواند .

حالت های مختلفی برای استفاده از این متد وجود دارد که به تشریح هر یک می پردازیم :

خواندن اطلاعات از یک فایل ” test.php ” ، بدون در نظر گرفتن خروجی آن :

کد:

$.get( ” test.php ” ) ;

خواندن اطلاعات از یک فایل ” test.php ” و ارسال همزمان اطلاعات اضافه به همراه درخواست ، بدون در نظر گرفتن خروجی آن :

کد:

$.get( ” test.php ” , { name : ” Mohammad ” , town : ” 1jQuery ” } ) ;

خواندن اطلاعات از فایل ” test.php ” و ارسال همزمان آرایه ای از داده ها به همراه درخواست ، بدون در نظر گرفتن خروجی آن:

کد:

$.get( ” test.php ” , { ‘colors ‘ : [ “Red” , “Green” , “Blue” ] } ) ;

خواندن اطلاعات از فایل ” test.php ” و نمایش اطلاعات در خروجی :

کد:

$.get(“test.php”, function(data){alert(“Data: ” + data);});

شکل کلی استفاده از متد ( ) get.$ به صورت زیر است :

کد:

$.get( URL , data , function ( data , status , xhr ) , dataType ) ;

url : تعیین کننده آدرس فایلی است که می خواهید متد آن را از سرور درخواست کرده و بخواند .استفاده از این پارامتر اجباری است .

data :این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .

function : این پارامتر تعیین کننده تابعی است که می خواهید هنگام ارسال درخواست Ajax به سرور ، اجرا شود . استفاده از این پارامتر اختیاری است . این تابع خود می تواند چندین پارامتر نیز داشته باشد :

data : در بر گیرنده اطلاعات خروجی از درخواست است .
status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد
success : موفق .
notmodified : هنوز اعمال یا بررسی نشده.
error : اشکال در ارسال یا پردازش درخواست .
timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .
parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .
xhr : در بر گیرنده شی XmlHttpRequest است .

dataType : این پارامتر نوع داده ارسالی از طرف سرور را تعیین می کند . استفاده از این پارامتر اختیاری است .به صورت اتوماتیک jQuery ، خودش به صورت پیش فرض نوع این داده را حدس می زند و می تواند یکی از موارد زیر باشد:
xml : یک فایل XML.
html : فایل HTML .
text : یک متن ساده String .
Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

متد ( ) post در jQuery
بوسیله متد post ، می توان فایلی را از سرور با استفاده از یک درخواست HTTP POST خواند .
سپس از نتیجه خروجی بر روی صفحه استفاده نمود .
شکل کلی استفاده از این متد بصورت زیر است :

کد:

Syntax $(selector).post( URL , data , function ( data , status , xhr ) , dataType ) ;

URL : تعیین کننده آدرس فایلی است که می خواهیم اطلاعات را از سرور درخواست کرده و بخوانیم . استفاده از این پارامتر اجباری است .

data : این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .

function : این پارامتر تعیین کننده تابعی است که می خواهید هنگامی که متد post به پایان رسید ، اجرا شود . این تابع خود می تواند چندین پارامتر نیز داشته باشد :

استفاده از این پارامتر اختیاری است .

data : در بر گیرنده اطلاعات خروجی از درخواست است .

status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .

notmodified : هنوز اعمال یا بررسی نشده.

error : اشکال در ارسال یا پردازش درخواست .

timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .

parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است .

dataType : این پارامتر نوع داده ارسالی از طرف سرور را تعیین می کند .استفاده از این پارامتر اختیاری است . به صورت اتوماتیک jQuery ، خودش به صورت پیش فرض نوع این داده را حدس می زند و می تواند یکی از موارد زیر باشد:

xml : یک فایل XML.

html : فایل HTML .

text : یک متن ساده String .

Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

متد ( ) Ajax در jQuery

در این بخش از آموزش JQuery ، متد ajax را شرح میدهیم.از متد ajax ، برای ارسال یک درخواست Ajax به سرور استفاده می شود .

تمامی متدهای Ajax در jQuery از متد ajax برای ارسال درخواست خود استفاده می کنند . اما در زمانی که هیچ کدام از آنها را نتوان به کار برد ، باید از متد ( ) Ajax استفاده کرد .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$.ajax( { name:value , name:value , … } ) ;

مقادیر پیش فرض را می توانید به صورت جفت های نام-مقدار تعیین نمایید . مثال زیر کاربرد متد ajax را نشان میدهد :

کد:

$(“button”).click(function(){ $.ajax({url:”demo_test.txt”,success:function(result){ $(“#div1”).html(result); }}); });

در جدول زیر ، انواع مقادیر ممکن برای جفت های نام-مقدار را معرفی کرده ایم :انواع جفت های نام-مقدار

async این پارامتر یک مقدار Boolean را تعیین می کند که آیا درخواست به صورت تبادل اطلاعاتی به سرور ارسال شود یا خیر . مقدار پیش فرض true است .
( beforeSend ( xhr به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال درخواست به سرور اجرا شود .
cashe این پارامتر یک مقدار Boolean را تعیین می کند ، که آیا صفحات دریافتی از سرور باید در حافظه Cashe ذخیره شوند یا خیر . مقدار پیش فرض true است .
(complete (xhr,status این پارامتر یک تابع را تعیین می کند تا در هنگام پایان یافتن درخواست اجرا شود . مقدار پیش فرض true است .
data تعیین کننده اطلاعاتی است که می خواهید به سرور ارسال نمایید .
error این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود ، اجرا شود .
password این پارامتر یک رمز عبور را برای استفاده در درخواست HTTP تعیین می کند . مقدار پیش فرض true است .
proccessData این پارامتر یک مقدار Boolean را تعیین می کند که آیا اطلاعاتی که قرار است به سرور ارسال شوند ، باید به صورت QueryString باشند یا خیر . مقدار پیش فرض true است .
success این پارامتر یک تابع را تعیین می کند تا در صورت اجرای موفق درخواست اجرا شود .
timeout مدت زمانی است که برای اجرای درخواست به میلی ثانیه تعیین می شود .
type این پارامتر نوع درخواست را تعیین می کند ( GET یا POST ) .
url این پارامتر آدرس صفحه مقصد که باید درخواست به آن ارسال شود را تعیین می کند . مقدار پیش فرض صفحه جاری است .
username این پارامتر یک نام کاربری را برای استفاده در درخواست HTTP تعیین می کند .

متد ( ) ajaxComplete در jQuery

در این بخش از آموزش JQuery ، متد ajaxComplete را شرح میدهیم.متد ajaxComplete ، یک تابع را تعیین می کند تا پس از اتمام درخواست Ajax اجرا شود .

برخلاف متد ( ) ajaxSuccess ، این متد تابع تعیین شده برای آن را اجرا می کند ، حتی اگر در خواست Ajax با موفقیت اجرا نشود .

شکل کلی استفاده از متد ajaxComplete بصورت زیر است :

کد:

$( selector ).ajaxComplete( function( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم پس از اتمام درخواست های Ajax اجرا شود .

استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .

xhr : در بر گیرنده شی XmlHttpRequest است .

options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxComplete را نشان میدهد :

کد:

$(“#txt”).ajaxStart(function(){ $(“#wait”).css(“display”,”block”); }); $(“#txt”).ajaxComplete(function(){ $(“#wait”).css(“display”,”none”); });

متد ( ) ajaxError در jQuery

در این بخش از آموزش JQuery ، متد ajaxError را شرح میدهیم.متد ajaxError ، یک تابع را تعیین می کند تا در صورتی که در خواست Ajax با errro مواجه شد ، اجرا شود .

برای مثال به وسیله این متد می توان پیام هشداری را به کاربر مبنی بر انجام ناموفقیت آمیز درخواست Ajax ، به کاربر اعلام کرد .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$( selector ).ajaxError( function( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم در صورت بروز error در اجرای درخواست های Ajax ، اجرا شود .

استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .

xhr : در بر گیرنده شی XmlHttpRequest است .

options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxError را نشان میدهد :

کد:

$(“div”).ajaxError(function(){ alert(“An error occurred!”); });

متد ( ) ajaxSend در jQuery

در این بخش از آموزش JQuery ، متد ajaxSend را شرح میدهیم.به وسیله متد ajaxSend می توان یک تابع را تعیین کرد تا در زمانی که درخواست Ajax به سرور ارسال می شود ، اجرا شود .

در واقع از متد ajaxSend می توان برای تعیین یک دستور یا کد ، برای اجرا همزمان با ارسال درخواست Ajax به سرور استفاده نمود .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$( selector ).ajaxSend ( function( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم همزمان با ارسال درخواست های Ajax به سرور، اجرا شود .

استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .

xhr : در بر گیرنده شی XmlHttpRequest است .

options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxSend را نشان میدهد :

کد:

$(“div”).ajaxSend(function(e,xhr,opt){ $(this).html(“Requesting ” + opt.url); });

متد ( ) ajaxSetup در jQuery

در این بخش از آموزش JQuery ، متد ajaxSetup را شرح میدهیم.به وسیله متد ajaxSetup ، می توان مقادیر پیش فرضی را برای استفاده در درخواست Ajax ، تعیین نمود .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$.ajaxSetup( { name:value , name:value , … } ) ;

مقادیر پیش فرض را می توانید به صورت جفت های نام-مقدار تعیین نمایید .

مثال زیر کاربرد متد ajaxSetup را نشان میدهد :

کد:

$(“button”).click(function(){ $.ajaxSetup({url:”demo_ajax_load.txt”,success:function(result){ $(“div”).html(result);}}); $.ajax(); });

در جدول زیر ، انواع مقادیر ممکن برای جفت های نام-مقدار را معرفی کرده ایم :

async این پارامتر یک مقدار Boolean را تعیین می کند که آیا درخواست به صورت تبادل اطلاعاتی به سرور ارسال شود یا خیر . مقدار پیش فرض true است .
( beforeSend ( xhr به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال درخواست به سرور اجرا شود .
cashe این پارامتر یک مقدار Boolean را تعیین می کند ، که آیا صفحات دریافتی از سرور باید در حافظه Cashe ذخیره شوند یا خیر . مقدار پیش فرض true است .
(complete (xhr,status این پارامتر یک تابع را تعیین می کند تا در هنگام پایان یافتن درخواست اجرا شود . مقدار پیش فرض true است .
data تعیین کننده اطلاعاتی است که می خواهید به سرور ارسال نمایید .
error این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود ، اجرا شود .
password این پارامتر یک رمز عبور را برای استفاده در درخواست HTTP تعیین می کند . مقدار پیش فرض true است .
proccessData این پارامتر یک مقدار Boolean را تعیین می کند که آیا اطلاعاتی که قرار است به سرور ارسال شوند ، باید به صورت QueryString باشند یا خیر . مقدار پیش فرض true است .
success این پارامتر یک تابع را تعیین می کند تا در صورت اجرای موفق درخواست اجرا شود .
timeout مدت زمانی است که برای اجرای درخواست به میلی ثانیه تعیین می شود .
type این پارامتر نوع درخواست را تعیین می کند ( GET یا POST ) .
url این پارامتر آدرس صفحه مقصد که باید درخواست به آن ارسال شود را تعیین می کند . مقدار پیش فرض صفحه جاری است .
username این پارامتر یک نام کاربری را برای استفاده در درخواست HTTP تعیین می کند .

متد ( ) ajaxStart در jQuery

در این بخش از آموزش JQuery ، متد ajaxStart را شرح میدهیم.به وسیله متد ajaxStart ، می توان یک تابع را تعیین نمود تا در زمانی که در خواست Ajax برای ارسال به سرور شروع می شود ، اجرا شود .

می توان کدها یا دستوراتی که می خواهید به محض شروع شدن درخواست Ajax اجرا شوند ، را در متد ajaxStart تعیین نمایید .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$( selector ).ajaxStart( function ( ) ) ;

function : نام تابعی است که می خواهیم به محض شروع شدن درخواست های Ajax ، اجرا شود .

استفاده از این پارامتر اجباری است . مثال زیر کاربرد متد ajaxStart را نشان میدهد :

کد:

$(“div”).ajaxStart(function(){ $(this).html(“<img src=’mypic.gif’ />”); });

 

متد ( ) ajaxStop در jQuery

در این بخش از آموزش JQuery ، متد ajaxStop را شرح میدهیم.به وسیله متد ajaxStop می توان یک تابع را تعیین کرد تا در زمان پایان یافتن ارسال و انجام تمام درخواست های Ajax به سرور ، اجرا شود .

در واقع از متد ajaxStop می توان برای تعیین یک دستور یا کد ، برای اجرا پس از پایان یافتن انجام درخواست های Ajax در سرور ، استفاده نمود .

هنگامی که یک درخواست ajax تمام می شود ، jQuery چک می کند که آیا درخواست دیگری وجود دارد یا خیر . اگر درخواست ajax دیگری وجود نداشته باشد ، آنگاه ajax تابع این متد را اجرا می کند .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$( selector ).ajaxStop ( function ( ) ) ;

function : نام تابعی است که می خواهیم پس از پایان یافتن تمام درخواست های Ajax در سرور، اجرا شود .

استفاده از این پارامتر اجباری است . مثال زیر کاربرد متد ajaxStop را نشان میدهد :

کد:

$(“div”).ajaxStop(function(){ alert(“All AJAX requests completed”); });

 

متد ( ) ajaxSuccess در jQuery

در این بخش از آموزش JQuery ، متد ajaxSuccess را شرح میدهیم.به وسیله متد ajaxSuccess می توان یک تابع را تعیین کرد تا در زمانی که درخواست های Ajax به سرور ، به صورت کامل و موفقیت آمیز به پایان رسید، اجرا شود .

در واقع از متد ajaxSuccess می توان برای قرار دادن کدها و دستوراتی که می خواهید پس از پایان یافتن موفقیت آمیز درخواست های Ajax در سرور اجرا شوند ، استفاده نمود .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$( selector ).ajaxSuccess ( function ( event , xhr , options ) ) ;

function : نام تابعی است که می خواهیم پس از اتمام موفقیت آمیز درخواست های Ajax ، اجرا شود . استفاده از این پارامتر اجباری است .

event : در بر گیرنده شی event است .

xhr : در بر گیرنده شی XmlHttpRequest است .

options : در برگیرنده تنظیمات ( optoions ) در درخواست Ajax است .

مثال زیر کاربرد متد ajaxSuccess را نشان میدهد :

کد:

$(“div”).ajaxSuccess(function(){ alert(“AJAX request successfully completed”); });

 

متد $.get در jQuery

در این بخش از آموزش JQuery ، متد get را شرح میدهیم.متد get ، با استفاده از یک درخواست HTTP GET ، اطلاعات مورد نظر را از سرور می خواند .

حالت های مختلفی برای استفاده از این متد وجود دارد که به تشریح هر یک می پردازیم :

خواندن اطلاعات از یک فایل ” test.php ” ، بدون در نظر گرفتن خروجی آن :

کد:

$.get( ” test.php ” ) ;

خواندن اطلاعات از یک فایل ” test.php ” و ارسال همزمان اطلاعات اضافه به همراه درخواست ، بدون در نظر گرفتن خروجی آن :

کد:

$.get( ” test.php ” , { name : ” Mohammad ” , town : ” 1jQuery ” } ) ;

خواندن اطلاعات از فایل ” test.php ” و ارسال همزمان آرایه ای از داده ها به همراه درخواست ، بدون در نظر گرفتن خروجی آن:

کد:

$.get( ” test.php ” , { ‘colors ‘ : [ “Red” , “Green” , “Blue” ] } ) ;

خواندن اطلاعات از فایل ” test.php ” و نمایش اطلاعات در خروجی :

کد:

$.get(“test.php”, function(data){alert(“Data: ” + data);});

شکل کلی استفاده از متد get به صورت زیر است :

کد:

$.get( URL , data , function ( data , status , xhr ) , dataType ) ;

url : تعیین کننده آدرس فایلی است که می خواهید متد آن را از سرور درخواست کرده و بخواند .استفاده از این پارامتر اجباری است .

data :این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .

function : این پارامتر تعیین کننده تابعی است که می خواهید هنگام ارسال درخواست Ajax به سرور ، اجرا شود . استفاده از این پارامتر اختیاری است . این تابع خود می تواند چندین پارامتر نیز داشته باشد :

data : در بر گیرنده اطلاعات خروجی از درخواست است .

status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .

notmodified : هنوز اعمال یا بررسی نشده.

error : اشکال در ارسال یا پردازش درخواست .

timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .

parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است .

dataType : این پارامتر نوع داده ارسالی از طرف سرور را تعیین می کند . استفاده از این پارامتر اختیاری است .به صورت اتوماتیک jQuery ، خودش به صورت پیش فرض نوع این داده را حدس می زند و می تواند یکی از موارد زیر باشد:

xml : یک فایل XML.

html : فایل HTML .

text : یک متن ساده String .

Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

مثال زیر کاربرد متد get را نشان میدهد :

کد:

$(“button”).click(function(){ $.get(“demo_test.asp”,function(data,status){ alert(“Data: ” + data + “nStatus: ” + status); }); });

 

متد ()getJSON.$JSON چیست؟

JSON یک فرمت تبدیل داده است .یکی از پر کاربرد ترین استفاده JSON واکشی داده های JSON از سرویس دهنده وب وتبدیل داده های JSON به اشیای جاوا اسکریپت و سپس استفاده داده ها در صفحات وب است.json کار تبدیل آرایه شما به شکل جاوااسکریپت و تبدیل دوباره آن از جاوا اسکریپت به نوع آرایه زبان روبرو را به عهده داردیک نمونه از یک ارایه با فرمت json در زیر آمده است

کد:

{ “employees”:

[

{ “firstName”:”Mohammad” , “lastName”:”Daryabiyan” },

{ “firstName”:”peyman” , “lastName”:”asadi” },

{ “firstName”:”amin” , “lastName”:”barzegar” }

]

}

این مقدمه چینی ها برای این بود که با نمونه دیگر از توابعی که برای مدیریت ای جکس مورد استفاده قرار میگیرد آشنا شویم این این تابع ()getJSON.$ نام دارد.

کد:

$. getjson ( URL , data , function ( value) {}) ;

URL: آدرس صفحه مقصد در سمت سرور (اجباری)

Data: داده هایی که قرار است به صفحه مقصد در سرور ارسال شود(اختیاری)

Function: تابعی که به تابع پاسخ به تماس یا callback معروف است ، این تابع میتواند با توجه به پاسخی که از سمت سرور دریافت کرده است عکس العمل مناسبی را از خود نشان دهد.

اما مورد استفاده ()getJSON.$ چیست ؟ زمانی که در یک فرایند ای جکس سرور به عنوان پاسخ یک آرایه را به سمت کلاینت ارسال میکند دیگر $.post و $.get کارایی خوبی نخواهند داشت و کار کمی پیچیده میشود ، چرا که سرور پاسخ را در قالب یک متن ارسال میکند ، حال اگر سرور یک آرایه را هم ارسال کند جاوا اسکریپت نمیتواند تشخیص دهد که این یک متن ساده است ویا یک آرایه.اینجاست که توسعه دهندگان وب به این فکر افتادند تا به کمک json که رابطه نزدیکی با جاوااسکریپت دارد، این مشکل را حل کنند

مشکل چگونه حل میشود؟برای حل این مشکل باید سرور آرایه ارسالی را به صورت و فرمت json در آورده و سپس به سمت کلاینت ارسال کند،مثلا در شکل زیر آرایه ۲ بعدی employees به فرمت json نوشته شده است

کد:

{ “employees”:

[

{ “firstName”:”Mohammad” , “lastName”:”Daryabiyan” },

{ “firstName”:”peyman” , “lastName”:”asadi” },

{ “firstName”:”amin” , “lastName”:”barzegar” }

]

}

اگر کمی به محتوای این فایل json دقت کنید خیلی شبیه به محتوای خانه های یک جدول است ، در اینجا شبیه به یک جدول با ۲ ستون و ۳ ردیف است.

سرور این آرایه را با این فرمت ارسال میکند و جاوااسکریپت در سمت کلاینت دقیقا این فرمت را درسمت کلاینت دریافت میکند ،

در زیر نحوه استفاده از تابع ()getJSON.$ آورده شده است

کد:

$.getJSON(“distance”,function(data){ alert(data.employees[0].firstName); })

همانگونه که میبینید در این مثال آنچه سرور ارسال کرده در قالب متغییر data قرار گرفته است . وبرای درسترسی به فیلد نام از آرایه employees به صورتی که در بالا میبینید عمل شده استبه مثال زیر توجه کنید

کد:

<!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” dir=”rtl”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>Untitled Document</title> <script type=”text/javascript” src=”includes/jquery-1.9.1.min.js”></script> <script>

$(document).ready(function(e)

{ $(“#form1”).submit(function()

{

$.getJSON(“json.php”) .done(function(data)

{ count=data.employees.length for(i=0;i<count;i++)

{ alert(“نام ونام خانوادگی دوستان:”+data.employees[i].firstName+” ” +data.employees[i].lastName); } }) .fail(function(jqXHR, textStatus)

{ alert(“شکست در عملیات “+textStatus); }) .always(function() { alert(“پایان “);

});

})

});

</script>

</head>

<body>

<form id=”form1″ onsubmit=”return false” dir=”rtl”>

<table border=”0″ cellspacing=”0″ cellpadding=”0″>

<tr> <td></td> <td>

<input type=”submit” value=” نام افرادی که در لیست استخدام هستند “/></td> </tr>

</table>

</form>

</body>

</html> [/i][/i]

کد های صفحه “json.php” که در سرور پاسخ میدهد

کد:

<?php $marray=”{ “employees”:

[

{ “firstName”:”محمد” ,

“lastName”:”دریابیانی” },

{ “firstName”:”پیمان” ,

“lastName”:”اسدی” },

{ “firstName”:”امین” ,

“lastName”:”برزگر” },

{ “firstName”:”تست” ,

“lastName”:”تستی” }

]

}

“; echo $marray;

?>

متد ( ) load در jQuery

در این بخش از آموزش JQuery ، متد load را شرح میدهیم.متد load ، اطلاعات مورد نظر را از سرور ( از یک فایل یا اسکریپت ) خوانده و در عنصر مورد نظر ، بر روی صفحه قرار می دهد ( اطلاعات ان را به روز رسانی می کند ) .

برای مثال فرض کنید که متنی را در یک فایل بر روی سرور ذخیره کرده اید ، می توانید با قرار دادن یک دکمه فرمان و تعیین تابع ( ) load در کد آن ، کاری کنید تا در صورت کلیک کاربر بر روی دکمه فرمان ، متن ذخیره شده در فایل ، مثلا در یک تگ div بر روی صفحه قرار داده شود .

شکل کلی استفاده از متد load بصورت زیر است :

کد:

$(selector).load ( url , data , function( response , status , xhr ) ) ;

url : تعیین کننده آدرس فایلی است که می خواهیم اطلاعات را از روی آن بخوانیم .

استفاده از این پارامتر اجباری است .

data : این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .

function : این پارامتر تعیین کننده تابعی است که می خواهید هنگامی که متد ( ) load به پایان رسید ، اجرا شود . این تابع خود می تواند چندین پارامتر نیز داشته باشد :استفاده از این پارامتر اختیاری است .

response : در بر گیرنده اطلاعات خروجی از درخواست است .

status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .

notmodified : هنوز اعمال یا بررسی نشده.

error : اشکال در ارسال یا پردازش درخواست .

timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .

parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است

مثال زیر کاربرد متد load را نشان میدهد :

کد:

$(“button”).click(function(){ $(“#div1”).load(“demo_test.txt”); });

متد ( ) post در jQuery

در این بخش از آموزش JQuery ، متد post را شرح میدهیم.وسیله متد post ، می توان فایلی را از سرور با استفاده از یک درخواست HTTP POST خواند .

سپس از نتیجه خروجی بر روی صفحه استفاده نمود .

شکل کلی استفاده از این متد بصورت زیر است :

کد:

$(selector).post( URL , data , function ( data , status , xhr ) , dataType ) ;

URL : تعیین کننده آدرس فایلی است که می خواهیم اطلاعات را از سرور درخواست کرده و بخوانیم . استفاده از این پارامتر اجباری است .

data : این پارامتر تعیین کننده اطلاعاتی است که می خوهیم همراه درخواست خود به سرور ارسال نماییم.استفاده از این پارامتر اختیاری است .

function : این پارامتر تعیین کننده تابعی است که می خواهید هنگامی که متد ( ) post به پایان رسید ، اجرا شود . این تابع خود می تواند چندین پارامتر نیز داشته باشد :

استفاده از این پارامتر اختیاری است .

data : در بر گیرنده اطلاعات خروجی از درخواست است .

status : .این پارامتر تعیین کننده وضعیت درخواست است که می تواند چندین حالت داشته باشد :

success : موفق .

notmodified : هنوز اعمال یا بررسی نشده.

error : اشکال در ارسال یا پردازش درخواست .

timeout : مدت زمان کافی برای اجرای درخواست تمام شده است .

parseerror : خواندن و اجرای درخواست با مشکل مواجه شده است .

xhr : در بر گیرنده شی XmlHttpRequest است .

dataType : این پارامتر نوع داده ارسالی از طرف سرور را تعیین می کند . به صورت اتوماتیک jQuery ، خودش به صورت پیش فرض نوع این داده را حدس می زند و می تواند یکی از موارد زیر باشد :

استفاده از این پارامتر اختیاری است .

xml : یک فایل XML.

html : فایل HTML .

text : یک متن ساده String .

Script : درخواست را به صورت یک اسکریپت اجرا کرده و نتیجه را به صورت متن ساده بر می گرداند .

مثال زیر کاربرد متد post را نشان میدهد :

کد:

$(“button”).click(function(){ $.post(“demo_test.asp”,function(data,status){ alert(“Data: ” + data + “nStatus: ” + status); }); });

متد ( ) data در jQuery

متد data ، می تواند اطلاعاتی را به یک عنصر مورد نظر اضافه کرده و یا اینکه اطلاعات آن را خوانده و به صفحه بازگرداند .

نکته : برای حذف اطلاعات اضافه شده از متد ( ) removeData استفاده نمایید .

خواندن و برگرداندن اطلاعات یک عنصر با استفاده از متد data :

به وسیله متد data می توانید اطلاعات موجود در یک عنصر HTML را خوانده و به صفحه بر گردانید .

شکل کلی استفاده از متد ( ) data در این حالت به صورت زیر است :

کد:

Syntax $( selector ).data ( name ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را خوانده و به صفحه بر گردانیم .

name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را خوانده و به صفحه بر گردانید .

استفاده از این پارامتر اختیاری است .

اضافه کردن اطلاعات به یک عنصر توسط متد ( ) data :

به وسیله متد ( ) data می توان اطلاعات مورد نظر خود را به یک عنصر در صفحه اضافه نمایید .

شکل کلی استفاده از متد ( ) data در این حالت به صورت زیر است :

کد:

$( selector ).data ( name , value ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را خوانده و به صفحه بر گردانیم .

name : این پارامتر تعیین کننده نام اطلاعاتی است که می خواهیم به عنصر مورد نظرمان اضافه نماییم .

استفاده از این پارامتر اجباری است .

value : این پارامتر تعیین کننده اطلاعاتی است که می خواهیم به عنصر مورد نظرمان اضافه نماییم .

استفاده از این پارامتر اجباری است .

مثال زیر کاربرد متد data را نشان میدهد .

کد:

$(“#btn1”).click(function(){ $(“div”).data(“greeting”, “Hello World”); }); $(“#btn2”).click(function(){ alert($(“div”).data(“greeting”)); });

 

متد each در jQuery

متد each ، یک تابع را تعیین کرده و به ازای هر عنصری که با مشخصات داده شده در پارامتر selector$ مطابقت داشته باشد ، یکبار اجرا می کند .

شکل کلی استفاده از متد each به صورت زیر است :

کد:

Syntax $( selector ).each( function( index,element ) ) ;

selector: این پارامتر تعیین کننده کلاس یا تگ عنصرهایی است که می خواهیم تابع مورد نظرمان به ازای هر نمونه از آن ، یکبار اجرا شود .

index : تعیین کننده اندیس عنصر مورد نظر است .

element : نشانگر عنصر جاری است . ( “this” هم می تواند استفاده شود ).

مثال زیر کاربرد متد each را نشان میدهد .

کد:

$(“button”).click(function(){ $(“li”).each(function(){ alert($(this).text()) }); });

 

متد index در jQuery

متد index ، اندیس عنصر مورد نظر رات نسبت به سایر عناصر مجاور آن خوانده و بر می گرداند .

عنصر می تواند توسط انتخاب کننده های تعیین شده و یا براساس اشیای DOM . اگر عنصر مورد نظر پیدا نشود ، مقدار برگشتی ۱- خواهد بود .

پیدا کردن اندیس اولین عنصر مطابق با جستجو نسبت به سایر عناصر مشابه :

به وسیله متد index می توان اندیس اولین عنصر مطابق با اطلاعات داده شده را خوانده و به صفحه برگداند .

شکل کلی استفاده از متد index ، در این حالت به صورت زیر است :

کد:

$(selector).index( ) ;

selector : تعیین کننده id عنصری است که می خواهیم اندیس آن را پیدا کنیم .

استفاده از این پارامتر اجباری است . مثال زیر کاربرد متد index را نشان میدهد .

کد:

$(“li”).click(function(){ alert($(this).index()); });

متد $.noConflict (جلوگیری از تداخل کدها در jQuery)

برخی از فریم ورک های جاوا اسکریپت نیز از علامت $ در کدهای خود استفاده می کنند ، مثل فریم ورکهای BackBone یا GoogleWebToolkit . حال اگر jQuery و یک فریم ورک دیگر در یک صفحه بصورت همزمان از علامت $ استفاده نمایند ، ممکن است در اجرای اسکریپت دچار مشکل شوید و کد شما درست کار نکند . برای این منظور در jQuery از متد $.noConflict استفاده می شود . با استفاده از این متد دیگر نیاز به بکار بردن علامت $ در کدهای jQuery نبوده و می توانید آن را حذف نمایید . سپس از این علامت در کدهای سایر فریم ورک ها به راحتی و بدون اختلال jQuery استفاده نمایید .

شکل کلی استفاده متد $.noConflict به صورت زیر است :

کد:

$.noConflict ( ) ;

مثال زیر کاربرد متد $.noConflict را نشان میدهد .

کد:

var jq=$.noConflict();

متد $.param در jQuery

متد $.param ، می تواند اعضای یک آرایه یا مجموعه خواص یک شی را به صورت پشت سر هم و جفت نام-مقدار ، خوانده و به صفحه بر گرداند .

برای مثال فرض کنید که یک شی ۳ خاصیت داشته باشد . خروجی این متد در هنگام استفاده به صورت زیر می باشد :

کد:

prop1 = value1 & prop2 = value2 & prop3 = value3 ;

از این رشته خواص و یا اعضای آرایه می توان برای ارسال اطلاعات در روش get استفاده کرد . این اطلاعات در انتهای آدرس URL صفحه اضافه شده و به صفحه مقصد ارسال می شوند .

شکل کلی استفاده از متد $.param به صورت زیر است :

کد:

$.param( object ) ;

obj : تعیین کننده نام شی یا آرایه ای است که می خواهیم مجموعه اعضا و یا خواص آن را به صورت پشت سر هم نمایش دهیم .

استفاده از این پارامتر اجباری است .

مثال زیر کاربرد متد $.param را نشان میدهد .

کد:

$(“button”).click(function(){ $(“div”).text($.param(personObj)); });

متد removeData در jQuery

متد removeData ، می تواند اطلاعات اضافه شده به یک عنصر را که قبلا توسط متد ( ) data اضافه شده است ، را حذف نماید .

اگر اطلاعاتی قبلا توسط متد ( ) data ، به عنصر اضافه نشده باشد ، این متد کار نمی کند .شکل کلی استفاده از متد removeData در این حالت به صورت زیر است :

کد:

$( selector ).removeData ( name ) ;

selector : این پارامتر تعیین کننده id عنصری است که می خواهیم اطلاعات آن را حذف نماییم .

name : این پارامتر تعیین کننده نام اطلاعاتی در عنصر مورد نظر است که می خواهید آن را حذف نمایید .

استفاده از این پارامتر اختیاری است .

اگر این پارامتر تعیین نشود ، کلیه اطلاعات موجود در عنصر حذف خواهد شد . مثال زیر کاربرد متد removeData را نشان میدهد .

کد:

$(“#btn2”).click(function(){ $(“div”).removeData(“greeting”); alert(“Greeting is: ” + $(“div”).data(“greeting”)); });

متد size در jQuery

متد size ، تعداد عناصر DOM ای که با مشخصات تعیین شده برای آن در پارامتر selector$ ، مطابقت دارند را بر می گرداند .

به عبارت دیگر ،متد size برای شمارش تعداد یک عنصر یا تگ مورد نظر ، بر روی صفحه استفاده می شود .

شکل کلی استفاده از متد size به صورت زیر است :

کد:

$(selector).size( ) ;

مثال زیر کاربرد متد size را نشان میدهد .

کد:

$(“button”).click(function(){ alert($(“li”).size()); });

 

متد toArray در jQuery

متد toArray ، کلیه عناصری که با مشخصات داده شده در پارامتر selector$ آن مطابقت دارند ، را در به صورت یک آرایه در خروجی بر می گرداند .

شکل کلی استفاده از متد toArray به صورت زیر است :

کد:

$(selector).toArray( ) ;

مثال زیر کاربرد متد toArray را نشان میدهد .

کد:

$(“button”).click(function(){ x=$(“li”).toArray() for (i=0;i<x.length;i++) { alert(x[i].innerHTML); } });[/i]

نوشته های مشابه

آموزش جامع و کامل جی کوئری بخش نهم

جهت مطالعه به ادامه مطلب مراجعه فرمائید (بیشتر…)

آموزش جامع و کامل جی کوئری بخش یازدهم (پایان)

جهت مطالعه به ادامه مطلب مراجعه فرمائید (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *