In last post, I have explain a method to get or post data using ajax. Here i am going to explain a method to interact from server using Jquery.
Note: If you want to use jquery in your application, you must add a latest jquery library.
Check carefully inside <head></head>. If a jquery library is already included then ignore to add this library.
Otherwise, add following code before </head>
Next step:
You can use GET or POST to interact with server. See following example:
1. Add following code above </head>
3. Create a page "result.php" on server (localhost or Online server). Put following code
4. When you click "Load Data" button
You will get output on browser without page refresh.
Explanation:
Check below code:
When you click a html tag having id = "driver", Your code will work. You can also use other events in the place of click. For example, onclick, onkeyup, onchange etc.
Here I am using post method to send data to server. You can use get method in place of post.
See parameters of post method.
Parameter 1: URL of the server, where you want to send the data. In this example, I am using "result.php"
Parameter 2: {"key1" : "value1", "key2": "value2"}. You will get $_POST['key1'] = value1 and $_POST['key2'] = value2 on result.php page. If you use get method, then you will get data like $_GET['key1'] and $_GET['key2'] on result.php
Parameter 3:
Note: If you want to use jquery in your application, you must add a latest jquery library.
Check carefully inside <head></head>. If a jquery library is already included then ignore to add this library.
Otherwise, add following code before </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
Next step:
You can use GET or POST to interact with server. See following example:
1. Add following code above </head>
<script type="text/javascript" language="javascript">2. Add following code anywhere inside body
$(document).ready(function() {
var mname = document.getElementById("myname").value;
$("#driver").click(function(event){
$.post(
"result.php",
{ "name": mname },
function(data) {
$('#mydata').html(data);
document.getElementById("getname").value = data;
}
);
});
});
</script>
<div id="stage"></div>
<input id="myname" name="myname" value="" /><br />
<input id="getname" name="getname" value = "" />
<input type="button" id="driver" value="Load Data" />
3. Create a page "result.php" on server (localhost or Online server). Put following code
<?php
echo 'Welcome '.$_POST['name'];
?>
4. When you click "Load Data" button
You will get output on browser without page refresh.
Explanation:
Check below code:
var mname = document.getElementById("myname").value;Here javascript variable "mname" is string data from input field having id "myname".
$("#driver").click(function(event)
{
// Your code
}
);
When you click a html tag having id = "driver", Your code will work. You can also use other events in the place of click. For example, onclick, onkeyup, onchange etc.
$.post(
"result.php",
{ "name": mname },
function(data) {
$('#mydata').html(data);
document.getElementById("getname").value = data;
}
);
Here I am using post method to send data to server. You can use get method in place of post.
See parameters of post method.
Parameter 1: URL of the server, where you want to send the data. In this example, I am using "result.php"
Parameter 2: {"key1" : "value1", "key2": "value2"}. You will get $_POST['key1'] = value1 and $_POST['key2'] = value2 on result.php page. If you use get method, then you will get data like $_GET['key1'] and $_GET['key2'] on result.php
Parameter 3:
function(data) {Its a callback function, You will get response from server. In this example, data is string echo value from result.php and storing into html tag having id "mydata" and id "getname".
$('#mydata').html(data);
}
