مثالی از تابع ()jQuery ajaxSetup
جمعه 13 شهریور 1394در این مقاله قصد داریم بایک مثال به شما توضیح دهیم که در هنگام فراخوانی های jQuery AJAX چگونه از تابع ()jQuery ajaxSetup استفاده کنیم.
تابع jQuery ajaxSetup اجازه می دهد تا مقادیر پیش فرض رایج برای درخواست های jQuery AJAX را مشخص کنیم.
HTML Markup
HTML Markup(زبان نشانه گذاری HTML) شامل یک HTML Button، یک تگ SPAN، و یک تگ پنهان div می باشد.
<input type="button" id="btnGet" value="Get IP Address" /> <br /> <br /> <span id="lblIPAddress"></span> <div class="modal" style="display: none"> <div class="center"> <img alt="" src="loader.gif" /> </div> </div>
استفاده از تابع ()jQuery ajaxSetup
HTML Button به رویداد کلیک jQuery اختصاص داده شده است. زمانی که بر روی Button کلیک می کنیم. jQuery AJAX با IP وب سرویس ارتباط برقرار می کند که آدرس IP دستگاه را نشان دهد.
تابع ()jQuery ajaxSetup تصویر با فرمت GIf را در حین بارگیری صفحه در فراخوانی jQuery AJAX نشان می دهد. تگ پنهان HTML DIV داخل رویداد show ،beforeSend می باشد و داخل رویداد complete، پنهان می باشد.
مقادیر پیش فرض رایج با استفاده از تابع jQuery ajaxSetup مشخص می شوند در حالی که مقادیر unique در درخواست مربوطه از jQuery AJAX مشخص می شوند.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("#btnGet").click(function () { $.ajaxSetup({ global: false, type: "GET", url: "http://www.telize.com/jsonip", beforeSend: function () { $(".modal").show(); }, complete: function () { $(".modal").hide(); } }); $.ajax({ data: "{}", success: function (r) { $("#lblIPAddress").html("IP Address: " + r.ip); } }); }); }); </script>
پیاده سازی loading با استفاده از CSS
کد CSS زیر برای نمایش Loading، که با استفاده از تصاویر GIF با jQuery فراخوانی کردیم، استفاده می شود.
<style type="text/css"> body { font-family: Arial; font-size: 10pt; } .modal { position: fixed; z-index: 999; height: 100%; width: 100%; top: 0; left: 0; background-color: Black; filter: alpha(opacity=60); opacity: 0.6; -moz-opacity: 0.8; } .center { z-index: 1000; margin: 300px auto; padding: 10px; width: 130px; background-color: White; border-radius: 10px; filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; } .center img { height: 128px; width: 128px; } </style>
- Jquery
- 1k بازدید
- 0 تشکر