Pitfalls .load () and .get ()

Very often there is a need to connect any templates or any content from another file. Unfortunately, not everyone can use the inlude function in PH due to the limited hosting capabilities. Hence the need for the AJAX call of the functions .load () and .get ().



Properties



.load () - Load data from the server and place the returned HTML in the specified element.

url

Type: String

A string containing the URL to which the request is directed.

Data



Type: Object or String

A simple object or string that is sent to the server with a request.

')

Function "completed"



Type: Function (String responseText, String textStatus, jqXHR jqXHR)

A callback function that runs when the request completes.

.get () - Download data from server using HTTP GET request.

url

Type: String

A string containing the URL to which the request is directed.



Data



Type: Object or String

A simple object or string that is sent to the server with a request.



Function "completed"



Type: Function (String responseText, String textStatus, jqXHR jqXHR)

A callback function that is executed when the request completes.



Data type



Type: String

The type of data expected from the server. Default: Intelligent Guess (XML, JSON, script or HTML).

---

Thus, we get almost identical functions with the exception of one BUT that came with experience. If we want to include the contents of the file and no more, for example, the contents of the file head.html, and place it in a section, then both functions will give us the same result. But if we need to supplement the contents of the sections (head, div), that is, if we already have some content, then the .load () function will completely replace the contents of block a, and for any attempt to use the JQUEY functions to add, for example, get the text and make html () + ..., then the result will be an eternal looping of the added functions .



When at the same time the .get () function works with the rest of the functions and (.append (), .html ()) is reasonable and does not cause looping. But do not forget that by default .get () replaces the content completely , and if you use appen () in the function success (), then the code will be added.

---

Example



.load ()

$('article').each(function () { $(this).load("template/head.html"); //        article }); 

.get ()

 $('article').each(function () { $(this).get("template/head.html"); //        article }); 

.load ()

 $('article').each(function (i, elem) { $(this).load("template/head.html", function (data) { $(elem).append(data); }); //       head,   break, continue   }); 

.get ()

 $('article').each(function (i, elem) { $(this).get("template/head.html", function (data) { $(elem).append(data); }); //       head }); 

---

.load () is a function for calling more PHP scripts from an HTML file;

.get () is a function for communicating between HTML files or for getting complemented content of a file.