JQuery Ajax with post
From w3cyberlearnings
Contents |
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
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
HTML form
<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>
jQuery form submit
$('form[name="frm_userinfor"]').submit(function(){
return false;
});
Get form data in jQuery
var uname = $('input[name="name"]').val();
var uaddress = $('input[name="location"]').val();
Pass form data to the greeting.php for processing
$.post('greeting.php',{name:uname,location:uaddress},function(data){
});
Get and check the return from the greeting.php
if(data=='failed'){
$('#content').html('Something wrong, please try again!');
}
else {
$('#content').html(data);
}
complete mypost1.html page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>POST METHOD</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() {
$('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>
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
<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() {
$('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>
Related Links
Ajax and MySQL Tutorial
