- Forums
- Scripts
- Easy Simple Tutorial How To Use Ajax Jquery With Php
this tutorial will show you how you can use jquery to get ajax from a server side script using simple html and php code [1361], Last Updated: Sat May 18, 2024
webune
Sun Jan 29, 2012
5 Comments
1531 Visits
hello everyone, im sort of new to jquery and ajax. i was getting familiar with using javascript and ajax when all of the sudden i started to do things and all directions pointed towards using jquery. so i had to learn jquery.. it was the best thing i did. its so much easy. this is a very simple way to show content from a php file using ajax
so with that in mind, i am going to show you a simple script which you can use to practice and see how it works.
im a PHP programmer so i will be performing the server side script using PHP.
i am using a Windows 7 Computer so i will be using notepad to create the files.
the first file we are going to create is the HTML file, you can call it jquery-simple-ajax.php or jquery-simple-ajax.html whatever you want. i am going to call it jquery-simple-ajax.php
so open a new notepad, copy and paste this code and save it as jquery-simple-ajax.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple JQuery Ajax Example by Webune.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// This functions starts the ajax to show the output from post.php
// COPYRIGHT: WWW.WEBUNE.COM
function StartAjax(ResultsId){
$.ajax({
type: "GET",
url: "post.php",
cache: false,
data: "name=John&location=Boston",
success: function(html){
$("#"+ResultsId).append(html);
}
});
}
</script>
</head>
<body>
<a href="#" onclick="StartAjax('ResultsId');">Click Here to see content from post.php</a>
<div id="ResultsId"></div>
</body>
</html>
next we are going to create the server side file called post.php
open another notepad, copy and paste the following code and save it as post.php
<?php
# The followin code will be sent to the ResultsId div in the jquery-simple-ajax.php file
# COPYRIGHT: WWW.WEBUNE.COM
echo 'This is the Data Received:<br><PRE>';print_r($_REQUEST);echo '</PRE>';
?>
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js