جیکوئری- متد load() در ajax

یادگیری jQuery

تعداد بازدید : 1710

تاریخ و ساعت انتشار : یک شنبه 12 آذر 1396 23:09

متد load()

این متد ساده ولی بسیار قدرتمند است.
متد load()داده را از سرور بارگزاری کرده و داده ی برگشتی را داخل عنصر انتخاب شده قرار می دهد.

شکل دستوری:

$(selector).load(URL,data,callback);

پارامتر URL الزامی بوده و مشخص کننده آدرسی است که می خواهید آن را بارگزاری کنید.
پارامتر data اختیاری بوده و مشخص کننده مجموعه ای از جفت کلید/مقدارquerystring است که میخواهید به همراه درخواست ارسال کنید.
پارامتر callback اختیاری بوده نام تابعی را که می خواهید بعد از پایان متد load() فراخوانی شود را مشخص می کند.

در بخش زیر، محتوای مثال بعدی قرار داده شده است: "demo_test.txt":

<h2>jQuery و AJAX h2>
<p id="p1">این یک پاراگراف است.</p>

مثال زیر متوای فایل "demo_test.txt" را داخل عنصر <div> بارگزاری می کند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt");
    });
});
</script>
</head>
<body>

<div id="div1"><h2> jQuery AJAX متن را تغییر خواهد داد </h2></div>

<button>مشاهده متن خارجی</button>

</body>
</html>
همچنین می توانید انتخاب گر های جیکوئری را به پارامتر url اضافه کنید.

مثال زیر محتوای عنصری با id=p1 را از فایل demo_test.txt داخل عنصر <div> بارگزاری می کند.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt #p1");
    });
});
</script>
</head>
<body>

<div id="div1"><h2> jQuery AJAX متن را تغییر خواهد داد</h2></div>

<button>مشاهده متن خارجی</button>

</body>
</html>
پارامتر callback اختیاری بوده نام تابعی را که می خواهید بعد از پایان متد load() فراخوانی شود را مشخص می کند. تابع بازگشتی می تواند پارامترهای مختلفی بپذیرد:

•   responseTxt - حاوی محتوای نهایی خواهد بود، اگر فراخوانی موفقیت امیز باشد.
•   statusTxt - حاوی وضعیت فراخوانی است.
•   xhr - حاوی شی XMLHttpRequest است.
مثال زیر پس از اتمام اجرای متد load()، یک پیغام هشدار نمایش می دهد. اگر متدload() موفقیت امیز باشد، این پیغام " بارگزاری محتوای خارجی باموفقیت انجام شد. " نمایش داده خواهد شد.اگر مشکلی رخ داده باشد نیز پیغام خطا نشان خواهد داد:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
            if(statusTxt == "success")
                alert(بارگزاری محتوای خارجی باموفقیت انجام شد");
            if(statusTxt == "error")
                alert("هشدار: " + xhr.status + ": " + xhr.statusText);
        });
    });
});
</script>
</head>
<body>