مثالی از تابع ()jQuery ajaxSetup

جمعه 13 شهریور 1394

در این مقاله قصد داریم بایک مثال به شما توضیح دهیم که در هنگام فراخوانی های jQuery AJAX چگونه از تابع ()jQuery ajaxSetup استفاده کنیم.

مثالی از تابع ()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>

 

برنامه نویسان

نویسنده 3355 مقاله در برنامه نویسان
  • Jquery
  • 1k بازدید
  • 0 تشکر

کاربرانی که از نویسنده این مقاله تشکر کرده اند

تاکنون هیچ کاربری از این پست تشکر نکرده است

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید