JQuery Ajax with load
From w3cyberlearnings
Contents |
What is load?
- The load method loads any dynamic or static using jQuery Ajax.
- The load method is simple and easy to use jQuery Ajax method.
The load method syntax
- URL: Any Server Site Resource (CGI, ASP, JSP, or PHP)
- DATA: Optional parameter to be passed to the the request URL.
- CALL BACK FUNCTION: A call back function invoked after the response data has been loaded.
[SELECTOR].load(URL, [DATA],[CALL BACK FUNCTION]);
Example load static content
myrecord.txt
- The text file content.
<p> My first jQuery Ajax with load method. </p>
myLoad.html TRY-IT
- Using load method to load the myrecord.txt file content.
- When you open myLoad.html page, you will see the myrecord.txt content.
<html>
<head>
<title>Load Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div').load('myrecord.txt');
});
</script>
</head>
<body>
<div></div>
</body>
</html>
Example load dynamic page
dynamic_page.php
- PHP page
<?php
$type = $_REQUEST['greeting'];
if (!empty($type)) {
switch ($type) {
case 'morning':
echo 'Good Morning!';
break;
case 'noon':
echo 'Noon is lunch time!';
break;
case 'afternoon':
echo 'Good afternoon!';
break;
case 'evening':
echo 'Good evening!';
break;
case 'night':
echo 'Good night!';
break;
default:
echo 'Oh, something wrong!';
break;
}
}
?>
phpPage.html TRY-IT
- The load method uses to load the PHP server site content.
- When click on the "button" and with user input, will display message
to the user.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>load dynamic page</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('button#mycli').click(function(){
var data = $('#greeting').val();
$('div#content_d').load('dynamic_page.php',{greeting:data});
});
});
</script>
</head>
<body>
<input type="text" id="greeting"/>
<button id="mycli">Check</button>
<div id="content_d"></div>
</body>
</html>
Example- jQuery load method with MySQL
Requirement
- Up and Running MySQL database server
- Web Server
- Create Table
- Insert sample records
Create Table (user_profile table)
CREATE TABLE user_profile ( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(200) NOT NULL, age INT NOT NULL, PRIMARY KEY(id) );
Insert sample records to user_profile table
INSERT INTO user_profile(name,age)
VALUES('Bob',39),
('Jing',41),
('Paul',42),
('David',40),
('Jamy',20),
('Christ',28);
user_profile.php
- This is the PHP server site page returns the user profile list.
<?php
define('HOST', 'localhost');
define('USER', 'user2000');
define('PASS', 'password2000');
define('DBNAME', 'w3cyberlearning');
$db = new mysqli(HOST, USER, PASS, DBNAME);
if (mysqli_connect_errno()) {
printf("Connect failed: %s<br/>", mysqli_connect_error());
}
$query =
"SELECT * FROM user_profile";
$conn = $db->prepare($query);
$conn->execute();
$conn->bind_result($id, $name, $age);
$my_table = '<table border="0" cellspacing="8" cellpadding="8">';
$my_table .='<tr><td>Id</td><td>Name</td><td>Age</td></tr>';
while ($conn->fetch()) {
$my_table .='<tr>';
$my_table .='<td>' . $id . '</td>';
$my_table .='<td>' . $name . '</td>';
$my_table .='<td>' . $age . '</td>';
$my_table .='<tr>';
}
$my_table .='</table>';
echo $my_table;
?>
user_profilePage.html
- The main page to load the user_profile.php page using jQuery load method.
- When you run this page, you will get list of users from the user_profile.php page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>User Profile List</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div#user_profile_content').load('user_profile.php');
});
</script>
</head>
<body>
<div id="user_profile_content"></div>
</body>
</html>
Example -load with Call back function
- Just display the table when successfully load the user_profile.php content.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div#user_profile_content').load(
'user_profile.php',null,function(responseText){
alert("Response:\n" + responseText);
});
});
</script>
Related Links
Ajax and MySQL Tutorial
