JQuery Ajax with post

From CoderLearner
Jump to: navigation, search

What is Post method in jQuery?

  • This method uses to process the post method request or response only.
  • To get the request send you need to use $_POST.
  • When you create a user input form and you want to use the post method, you have to set the form method to post (method="post").
  • We use the post method when the information send to the server need to keep secret, this information such as user name and password.

Example 1

greeting.php page

  • To get the user information, we use the $_POST method
<?php

$name = $_POST['name'];
$location = $_POST['location'];

if (!empty($location) && !empty($name)) {
	printf("%s is from %s", $name, $location);
} else {
	echo 'failed';
}
?>

mypost1.html

<!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>
         $(document).ready(function() {

            $('form[name="frm_userinfor"]').submit(function(){
               var uname = $('input[name="name"]').val();
               var uaddress = $('input[name="location"]').val();
               $.post('greeting.php',{name:uname,location:uaddress},
               function(data){
                  if(data=='failed'){
                     $('#content').html('Something wrong, please try again!');
                  }
                  else {
                     $('#content').html(data);
                  }
               });
               return false;
            });
         });
      </script>
   </head>
   <body>
      <div id="content"></div>
      <form name="frm_userinfor" method="post">
         Name:<input type="text" name="name"/><br/>
         Location:<input type="text" name="location"/><br/>
         <input type="submit" name="check" value="Check" />
      </form>
   </body>
</html>

Try It

Example 2

  • Post method with MySQL and JSON

Create Table and Insert Records

CREATE TABLE user_profile
( 
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(200) NOT NULL,
  age INT NOT NULL,
  PRIMARY KEY(id)
);

INSERT INTO user_profile(name,age)
 VALUES('Bob',39),
       ('Jing',41),
       ('Paul',42),
       ('David',40),
       ('Jamy',20),
       ('Christ',28);

user_profile.php

  • This PHP uses to get record from the MySQL and generate JSON data for client to process.
?php

define('HOST', 'localhost');
define('USER', 'user2000');
define('PASS', 'password2000');
define('DBNAME', 'w3cyberlearning');

$db = new mysqli(HOST, USER, PASS, DBNAME);
$age = $_POST['age'];
$result = array('error' => 'sure');
if (!empty($age)) {
	if ($db->connect_errno) {
		echo "Failed to connect to MySQL: (" 
             . $db->connect_errno . ") " . $db->connect_error;
	} else {
		$query =
		        "SELECT * FROM user_profile WHERE age >=?";
		$conn = $db->prepare($query);

		if ($conn) {
			$conn->bind_param("i", $age);
			$conn->execute();
			$conn->bind_result($id, $name, $age);

			$result = array();
			while ($row = $conn->fetch()) {
				$result[] = array(
                                           'id' => $id, 
                                           'name' => $name, 
                                           'age' => $age);
			}

			echo json_encode($result);
		}
		$conn->close();
	}
} else {
	echo json_encode($result);
}
$db->close();
?>

myuserinformation.html

Post and JSON data

<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() {
	   $('form[name="frm_userinfor"]').submit(function(){
		var userage = $('input[name="age"]').val();
				
		$.post('user_profile.php',{age:userage},function(data){

		     if(data.error=='sure'){
				$('#content').html('Error processing!');
			}
		     else {
			var table = '<table border="1">';
			table += '<tr><td>User Id</td>'
                               +'<td>User Name</td><td>User Age</td></tr>';
			$.each(data,function(i,element){
				table +='</tr>';
				table +='<td>'+ element.id + '</td>';
				table +='<td>'+ element.name + '</td>';
				table +='<td>'+ element.age + '</td>';
				table +='</tr>';
			});
			table +='</table>';
			$('#content').html(table);
		     }
		},'json'); 
		return false;
	     });
	});
</script>
</head>
<body>
	<div id="content"></div>
	<form name="frm_userinfor" method="post">
		Age:<input type="text" name="age"/><br/>
		<input type="submit" name="check" value="Check" />
	</form>
</body>
</html>