Home  >  Article  >  Web Front-end  >  About the usage and analysis of JQuery ($.load) event_jquery

About the usage and analysis of JQuery ($.load) event_jquery

WBOY
WBOYOriginal
2016-05-16 17:38:00930browse

First of all, we need to be clear that the jquery load method is a method that encapsulates jQuery.ajax() for our convenience. When we need to deal with more complex logic, we still need to use the comparison of jQuery.ajax() of a comprehensive approach.

The complete syntax format for calling the load method: load( url, [data], [callback] )
where: url refers to the address of the file to be imported.
data: Optional parameter; because load can not only import static html files, but also dynamic scripts, such as PHP files, so when we want to import dynamic files, we can put the parameters to be passed here.
callback: optional parameter; refers to another function that is executed after calling the load method and getting a response from the server.

A few usage examples are given below:

1. Load a php file that does not contain passing parameters

Copy code Code As follows:

$("#myID").load("/test.php");//The result after importing test.php in the element with id #myID

2. Load a php file that contains a passing parameter

Copy code Code As follows:

$("#myID").load("/test.php",{"name":"Adam"});//The imported php file contains a passing parameter, Similar to the request url: /test.php?name=Adam

3. Load a php file that contains multiple passed parameters. Note: Separate the parameters with commas

Copy the code The code is as follows:

$( "#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"});//The imported php file contains a passing parameter , similar to the request url:/test.php?name=Adam&site=www.phpernote.com

4. Load a php file that uses an array as a passing parameter

Copy code The code is as follows:

$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com" ]});//The imported php file contains an array passing parameter.

Note: When using load, these parameters are passed in POST, so in /test.php, GET cannot be used to obtain parameters.

5. How to use callback. For example, if we want to slowly display the loaded content after the load method gets the server response, we can use the callback function. The code is as follows:

Copy code The code is as follows:

$("#go" ).click(function(){
$("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam", function(){
$("#myID").fadeIn('slow');}
);
});

6. Load page fragments

The

.load() method allows us to specify a certain part of the remote document to be inserted. This is achieved through a special syntax for url parameters. If the string contains one or more spaces, the string following the first space is the jQuery selector that determines what is loaded. For example:

Copy code The code is as follows:

$("#result").load( "/test.html #container");

7. Methods to prevent jquery load from using cache

Caching speeds up page loading to a certain extent, but it often brings us trouble. In actual application, we may encounter browser cache problems. For example, I encountered this problem in IE7.

Copy code The code is as follows:

$(document).ready(function(){
$("#labels").load("/test.html");
//When the page is loaded, insert the content of test.html into the DOM element with the ID #labels
}. );

After I updated test.html, the load method in IE7 still uses the old test.html, and it doesn’t work even if I press the refresh key. Fortunately, jQuery provides a method to prevent ajax from using cache. Add the following statement to the head javascript file to solve the problem.

Copy code The code is as follows:

$.ajaxSetup({
cache: false / /Close AJAX corresponding cache
});

In addition, I will introduce several methods to solve the cache problem. Note: I have not tested on jQuery load issues, these methods are for reference only!

1. Change the file name, such as changing test.html to labels_new.html, but this is a no-brainer, and generally no one does this.

2. Add a specific time after test.html, such as test.html?20081116. In actual work, after I update the css/javascript file, I always use this method to prevent the file from being cached.

3. Add the following statement at the top of the test.html file:

Copy the code The code is as follows:



In addition, when using jquery load, you need to pay attention to the following:

(1) If bound to the window object, it will be triggered after all content is loaded, including windows, frames, objects and images. If bound to an element, it fires when the element's content is loaded.

(2) Only if the load processing function is bound before this element is completely loaded, it will be triggered after it is loaded. If you bind it later, it will never trigger. So don't bind the load event in $(document).ready(), because jQuery will bind the load event after all DOM loading is completed.

(3) jQuery uses the browser's .innerHTML attribute to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document, such as , or <head> elements. The result is that the elements retrieved by .load() may not be exactly the same as the document retrieved directly by the browser. </p> <br></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="Jquery image scrolling and slideshow example code_jquery" href="http://m.php.cn/faq/17577.html">Jquery image scrolling and slideshow example code_jquery</a></span><span>Next article:<a class="dBlack" title="Jquery image scrolling and slideshow example code_jquery" href="http://m.php.cn/faq/17579.html">Jquery image scrolling and slideshow example code_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>