Introduction to JQUERY - Loading Data from an External Source with load()

Guest Posts Paolo Nikko Nuñal

JQUERY can do stuff that you normally would want to do with your program. In this tutorial we are going to learn how JQUERY can load .txt file from a given source. The load() method loads data from the server and returns the data into the selected element that you have chosen.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here





Syntax:

$([SELECTOR]).load([URL],[DATA],[CALLBACK]);

The first thing you notice that the load() method has three parameters.

URL - Self explanatory, the URL that you wish to load or path for the .txt file.

DATA - Optional, a data parameter that specifies a set of query string key/value that you need to send together with the request.

CALLBACK - Optional, a callback parameter that that contains the name of a function to be executed once the specific item has been loaded.

Code


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
      $(document).ready(function(){
         $("#btn-load").click(function(){
             $("#display").load("data.txt");
         });
      });
</script>
</head>
<body>
<button type="button" id="btn-load">Load External Data</button>
<div id="display">Rtrieved Data Goes Here</div>
</body>
</html>


In your data.txt file. You should have some text and it will automatically be loaded and displayed on the division with the id  "display". This is very important if you are planning to load files from an external source.

For more information you can check out Dr. Stibbard tutorials below.




Learn HTML5/PHP/AJAX Web Programming from Scratch – An amazing course from Dr. Richard Stibbard. Usually I only promote my own courses, but this course is very impressive, so I cut a deal with Dr. Stibbard … You can also find Richard’s website here