jQuery
load()
Load data from the server and place the returned HTML into
the matched element.The jQuery load() method is a simple, but powerful AJAX
method.The load() method loads data from a server and puts the returned data
into the selected element.
Syntax of load() :
$(selector).load(URL,data,callback);
|
The parameters of the load() method:
·
The required URL parameter specifies the URL of the file you
want to load.
·
The optional data parameter specifies a set of query string
(i.e. key/value pairs) that is sent to the web server along with the request.
·
The optional complete parameter is basically a callback
function that is executed when the request completes. The callback is fired
once for each selected element.
Example of
the load() method :-
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div2").load("demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div2"></div>
<button>Get External Content from external file </button>
</body>
</html>
|
Example 2-
<!DOCTYPE html>
<html>
<head>
<meta
name="viewport" content="width=device-width" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function(){
$('#msgDiv111').load('/jquery/getdata',
// url
{
name: 'bill' }, // data
function(data,
status, jqXGR) { // callback function
alert('data
loaded');
});
});
});
</script>
</head>
<body>
<h1>
jQuery load() method demo
</h1>
<input
type="button" id="loadBtn" value="Load Data"
/>
<div
id="msgDiv111"></div>
</body>
</html>
|