illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

ترفندهای پیشرفته jQuery (قسمت 20)

0 368 ۲۴ مهر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم.
jquery trickshot

موضوع چهارم : Ajax

ترفند 39 : مرتب کردن و سریال کردن Object ها

اگر شما یکی از طرفداران jQuery هستید و زیاد از اون استفاده میکنید ، باید با متدهایی که فرمها و همچنین شئ های کوچک رو Encode میکنن ، آشنا باشید. نتیجه اینکار اینه که یک نمایش کاربر پسند و URL-Friendly بوجود میاد و بیشتر میشه اون فرم رو فهمید و استنباط کرد. در اینجا روش کار با این متدهارو براتون توضیح میدم:

کدهای HTML:

همونطور که میبینید یک فرم قرار داده شده و درون اون هم input و textarea وجود داره.

کدهای Javascript:

در ابتدا فرم مورد نظر رو انتخاب کرده و درون یک متغیر قرار میدیم:

حالا از متد Serialize استفاده میکنیم:

نتیجه در Console بصورت زیر خواهد بود:

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

حالا یک مثال از متد $.param میزنیم:

خروجی بصورت زیر خواهد بود:

دیدید که در بالا یک شئ دلخواه رو با استفاده از این متد به یک رشته تبدیل کردیم.

در آخر هم مثالی از متد $.serializeArray() براتون میزنم که میشه با استفاده از اون فرمتون رو به یک شئ تبدیل کنید:

خروجی:

زمانی که شما یک شئ رو بعنوان یک آرگومان به یک تابع Ajax پاس میدید ، بسیاری از این تبدیل شدنها در پس زمینه صورت میگیره.

ترفند 40 : آپلود فایلها با jQuery

مرورگرهای مدرن از FormData API پشتیبانی میکنن که به شما اجازه میدهد که اطلاعات باینری رو از طریق Ajax ارسال و آپلود کنید. اگر این مورد رو با HTML5 File API ترکیب کنیم ، شما میتونین براحتی و بدون نیاز به هیچ پلاگینی فایلهای خود رو آپلود کنید.

کدهای HTML:

کدهای Javascript:

در ابتدا المنتهای مورد نظر رو در متغیر قرار میدیم:

بعد از اون یک رویداد کلیک برای دکمه مورد نظر تعریف میکنیم و از طریق ویژگی files به اطلاعات فایل انتخابی توسط input file دسترسی پیدا میکنیم:

در مرحله بعد اگر ویژگی length برابر با صفر باشه ، متوجه میشیم که فایلی انتخاب نشده و یک پیغام به کاربر نمایش داده میشه و همچنین return false میدیم تا باعث بشه که کلیکی که کردیم هیچ نتیجه ای نداشته باشه:

در مرحله بعد هم یک شئ FormData میسازیم و فایل انتخابی رو به اون اضافه میکنیم:

در آخر هم این فایل رو با Ajax به آدرس مورد نظر Upload میکنیم ، که در اونجا فقط اسم فایل چاپ میشه:

ترفندی که در اینجا مورد استفاده قرار گرفت این بود که ویژگی های contentType و processData برابر با false قرار گرفتن. با اینکار jQuery اطلاعات مورد نظر رو serialize نمیکنه و بهمین دلیل با خطا روبرو نمیشه. با اینکار فایل مورد نظر آپلود میشه و دیدید که به پلاگینی هم نیاز نبود.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram