Tags

, , , , , , , , , , ,

What is jQuery?
jQuery is a lightweight JavaScript library whos aim is “write less, do more”. As jQuery is lightweight, it is easier to load in your website and has fast responce. With help of jQuery it much easier to use JavaScript on your website.
Jquery eliminates the many lines of code which we are doing in javascript and make them available with help of single method.

What is AJAX?
AJAX stand for Asynchronous JavaScript and XML. it is used for creating dynamic and fast web pages. Since AJAX is Asynchronous, it helps in updating a part of web page with out reloading the whole page.

What About jQuery and AJAX?
The combination of jquery and ajax provide powerfull functionality. With jquery ajax you can make request for text or html from your  remote server. If data is large you can use json to receive them. After receiving ajax response we can use them in our html page.

jQuery provides some powerful set of jQuery AJAX API’s to handle AJAX requests. In normal way of making AJAX calls using JavaScript is a little bit odd as you have to first create an XMLHttpRequest object that depends on the browser and then make an AJAX call. Also sending a form data using AJAX is also bit difficult if we use normal JavaScript approach of calling AJAX.
jQuery provides simple yet powerfull functions which have extended the JavaScript AJAX methods and provide more flexible way. Let us see way of doing AJAX things in jQuery.

In this tutorial of php code for beginners we will show you how to use Jquery Ajax in your php form.
Lets start… To use Jquery Ajax we need to create two files, In first file our html php code present from where we do ajax request. in second file we process the ajax request and return the result to first page.

Step 1:- Create a school.php file and put this code in it.

<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;

English: jQuery Mobile logo.

English: jQuery Mobile logo. (Photo credit: Wikipedia)

<script>
function getdetails(){
var name = $(‘#name’).val();
var rno = $(‘#rno’).val();
$.ajax({
type: “POST”,
url: “details.php”,
data: {fname:name, id:rno}
}).done(function( result ) {
$(“#msg”).html( ” Address of Roll no ” +rno +” is “+result );

English: OpenClinica: styling with jQuery

English: OpenClinica: styling with jQuery (Photo credit: Wikipedia)

});
}
</script>
</head>
<body>
<table>
<tr>
<td>Your Name:</td>
<td><input type=”text” name=”name” id=”name” /><td>
</tr>
<tr>
<td>Roll Number:</td>
<td><input type=”text” name=”rno” id=”rno” /><td>
</tr>
<tr>
<td></td>
<td><input type=”button” name=”submit” id=”submit” value=”submit” onClick = “getdetails()” /></td>
</tr>
</table>
<div id=”msg”></div>
</body>
</html>

In above code we are taking name and roll no of student and pass this to details.php using jquery ajax.

Step 2:- Create details.php and put the below code in it.

<?php
$name = $_POST[‘fname’];
$rno = $_POST[‘id’];

$con = mysql_connect(“localhost”,”root”,””);
$db= mysql_select_db(“school”, $con);
$sql = “SELECT address from students where name='”.$name.”‘ AND rno=”.$rno;
$result = mysql_query($sql,$con);
$row=mysql_fetch_array($result);
echo $row[‘address’];
?>

In above code we are getting address of student with help of his name and roll number.

Note: We can do this with help of normal coding but the difference here is we are getting result without refreshing the page and that’s the magic of jquery Ajax.

Don’t forget to create database named “school” and table name “students”. table student contain the fields name, rno and address.

Advertisements