JQuery Ajax with load

From CoderLearner
Jump to: navigation, search

Description

  • The load method loads any dynamic or static page by using jQuery Ajax.
  • The load method is simple and easy to use.

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]);

Note

  • $.load is obsolete, please check the more current version.

The $.load method is not supported with all the browser. If you may want to use $.ajax, $.get, or $.post method to load page content.

Example 1

  • myrecord.txt is a text file and it is not an empty file.
  • Using load method to load the myrecord.txt file content.
  • When you open myLoad.html page, you will see the myrecord.txt content loaded.
<!DOCTYPE html>
<html>
   <head>
      <title>ajax</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $('div').load('myrecord.txt');
         });
      </script>
   </head>
   <body>
      <div></div>
   </body>
</html>

Try It

Example 2

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

  • 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.

<!DOCTYPE html>
<html>
   <head>
      <title>ajax</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.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>

Try It

  • morning, noon, afternoon, evening, night, or something else.

Example 3- jQuery load method with MySQL

  • 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="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 4-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>