jquery Practice operation: Load () method

Recently decided to summarize the actual project in the JS related to some of the operation, so open this series, record the use of some practical operational problems and solutions, give yourself a record.

The jquery load method is a method of encapsulating Jquery.ajax () to facilitate our use, and we need to use the more comprehensive approach of jquery.ajax () when we need to deal with more complex logic.

Load () Method:

full Syntax format: Load (URL, [data], [callback]) /* Parameters:
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 import dynamic scripts such as PHP files, so to import the dynamic files, we can put the parameters to be passed here. Callback: optional parameter; refers to another function that executes after calling the load method and getting the server to respond. */

The actual project uses the load () method to dynamically load a page, which is more concise and modular throughout the project.

• Common:load () a page(. html/. jsp/php/.... ）

  Here are a few examples of usage:

  1. Load a PHP file that contains no pass parameters

  $ ("#myID"). Load ("/test.php"// in ID # The result of importing test.php after running in the myID element

  2. Load a PHP file that contains a pass-through parameter

  $ ("#myID"). Load ("/test.php", {"name  ":"Adam"// the imported PHP file contains a pass parameter, similar to the request Url:/test.php?name=adam 

  3. Load a PHP file that contains multiple pass parameters. Note: separated by commas between parameters

  $ ("#myID"). Load ("/test.php", {"name  ":"Adam","site":"  www.lhy-seo.com"// the imported PHP file contains a pass-through parameter similar to the request url:/test.php?name=adam&site= Www.phpernote.com

  4. Load a PHP file with an array as the pass parameter

  $ ("#myID"). Load ("/test.php", {'myinfo[] ', ["Adam""www.lhy-seo.com"//  The imported PHP file contains an array pass-through parameter.  Note: Using load, these parameters are passed as post, so in/test.php, you cannot get parameters with get. 

  5. How to use callback, for example, if we want to display the loaded content slowly after the load method gets the server response, we can use the callback function.

  $("#go"). Click (function () {$ ("#myID"). Load ("welcome.php", {"lname":"Cai","fname":"Adam", Function () {$ ("#myID"). FadeIn ('Slow'); });});

  Note: the load () Pass mode is the post mode;
  

  To get the passed arguments, example:

  First page: (It is transmitted by post)//Js:$ (function () {$ ("#test"). Load ("a.jsp",{"name":"Adam"});});//page elements:<p id="Test"></p>in the second JSP: (Get parameters in a JSP)//Java:<%String username= Request.getparameter ("name"); System. out. println (username);%>//page elements:<span> This is the second page </span>//Js:$ (function () {varName ="<%=username%>"; alert (name);});

  6. Loading page fragments

  The. Load () method allows us to specify a section of the remote document to be inserted. This is achieved through the special syntax of the URL parameter. If the string contains one or more spaces, the string immediately preceding the first space is the jQuery selector that determines what is loaded. Like what:

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

  7. Ways to prevent jquery load from using caching

  Caching this stuff, to some extent, speeds up the loading of pages, but it often brings us trouble. In practice, we may encounter problems with browser caching. For example, I met this problem in the IE7.

  $ (document). Ready (function () {    $ ("#labels"). Load ("/ test.html");     // inserts the contents of test.html in the DOM element with ID #labels when the page is loaded. });

  When I update test.html, the Load method in IE7 is still using the old test.html, even if I press the Refresh key. Fortunately, jquery provides a way to prevent Ajax from using caching, and the following statements are added to the head's JavaScript file to solve the problem.

  $.ajaxsetup ({    false// close ajax corresponding cache });

  In addition, I will introduce several methods to solve the caching method. Note: I did not test on the jquery load issue, these methods are for reference only!

  1. Change the file name, such as the test.html to lables_new.html, but there is no way to do, generally no one does.

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

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

  <meta http-equiv="Pragma" content="no-cache">< META http-equiv= "Expires" content="-1">

  In addition, when using jquery load, it is important to note that:

  (1) If you bind to a Window object, it fires after all content is loaded, including Windows, frames, objects, and images. If it is bound to an element, it is triggered when the content of the element has finished loading.

  (2) A handler function that binds load before the element is fully loaded will be triggered when he finishes loading. If you do, then the binding will never be triggered. So do not bind the Load event in $ (document). Ready () because jquery binds the Load event after all DOM loading is complete.

  (3) JQuery uses the browser's. InnerHTML property to parse the retrieved document and insert it into the current document. In this process, the browser often filters out elements from the document, such as

Source:http://www.jb51.net/article/35386.htm

jquery Practice operation: Load () method