از متد ()Ajax ، برای ارسال یک درخواست Ajax به سرور استفاده می شود .
تمامی متدهای Ajax در jQuery از متد ()Ajax برای ارسال درخواست خود استفاده می کنند .
شکل کلی استفاده از این متد بصورت زیر است :
1 | $.ajax({name:value, name:value, ... }); |
مقادیر پیش فرض را می توانید به صورت جفت های نام-مقدار تعیین نمایید .
در جدول زیر، انواع مقادیر ممکن برای جفت های نام-مقدار را مشاهده می کنید:
| 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 تعیین می کند . |
مثال:در مثال زیر فایل متنی demo_test.txt را به وسیله متد ajax از سرور خوانده ومحتوی آن را در صفحه قرار می دهیم.
1 2 3 4 5 6 | $.ajax({url: "demo_test.txt", success: function(result) { $("#div1").html(result); } }); |
می توانید کد کامل مثال بالا را در زیر مشاهده نمایید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $.ajax({url: "demo_test.txt", success: function(result){ $("#div1").html(result); }}); }); }); </script> </head> <body> <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> <button>Get External Content</button> </body> </html> |
مثال:فرستادن اطلاعات فرم به فایل “request.php” و نمایش نتیجه درخواست در صفحه
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $("#submit").click(function() { $.ajax({ type: "POST", url: "request.php", data:$("#form").serialize(), beforeSend: function() { $("#aload").html('<b>منتظر باشید</b>'); }, success: function(){ $('#success').html('با تشکر اطلاعات شما ذخیره شد'); } , error: function() { // Fail message $('#success').html("خطای پیش آمده"); }, }); }); |
نکات:
۱-در مثال بالا متد ()serialize جفت های نام-مقدار موجود در فرم را به request.php ارسال می کند.
می توانید کد کامل مثال بالا را در زیر مشاهده نمایید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("#submit").click(function() { $.ajax({ type: "POST", url: "request.php", data:$("#form").serialize(), beforeSend: function() { $("#aload").html('<b>منتظر باشید</b>'); }, success: function(){ $('#success').html('با تشکر اطلاعات شما ذخیره شد'); } , error: function() { // Fail message $('#success').html("خطای پیش آمده"); }, }); }); }); </script> </head> <body> <div id="load"></div> <div id="success"></div> <form action="" id="form" > First name: <input type="text" name="FirstName" ><br> Last name: <input type="text" name="LastName" ><br> <input type="submit" value="submit" id="submit" /> </form> </body> </html> |
