بارگذاری یک صفحه درون یک Div با استفاده از jQuery

سه شنبه 12 آبان 1394

در این مقاله نشان خواهیم داد چگونه می توان یک صفحه را با استفاده از jQuery در یک Div نشان داد. کاری بسیار سریع و آسان اما بسیار مورد استفاده است.

بارگذاری یک صفحه درون یک Div با استفاده از jQuery

در این مقاله نشان خواهیم داد چگونه می توان یک صفحه را با استفاده از jQuery در یک Div  نشان داد. کاری بسیار سریع و آسان اما بسیار مورد استفاده است.

برای پیاده سازی چنین عملی به یک صفحه HTML و یک Div نیاز است . به یک لینک در صفحه احتیاج داریم که با کلیک بر روی آن صفحه HTML مورد نظر در  div بارگذاری شود.

در jQuery از متد ()load.  استفاده میکنیم. متد  ()load.  داده ها را از سرور بارگذاری میکند و صفحه Html بازگشتی را در یک عنصر همسان قرار می دهد. که به صورت زیر استفاده می شود:

.load( url [, data ] [, complete ] ) 

url : شامل یک رشته که درخواست ارسال شده است. و از نوع  string است .

data: اساسا یک رشته و یک نوع شی است که با درخواست همراه شده است.

Complete: این بخش از متد زمانی اجرا خواهد شد که درخواست کامل شده باشد.

کدها در صفحه به صورت زیر خواهد بود:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title></title>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
</head>  
<script type="text/javascript">  
    jQuery(function () {  
        jQuery('#anchorLink').click(function () {  
            jQuery('#pagecontainer').load('Page.html',  
                            function () {  
                                alert('Content Successfully Loaded.')  
                                 
                            }  
                    );  
        });  
    })  
        </script>  
<body>  
<a href="javascript:void(0)" id="anchorLink">To Load your page,click here...</a><br />  
        <div id="pagecontainer" />  
</body>  
</html>

 

 

فایل های ضمیمه

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

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

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

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