Difference between revisions of "PHPAJAX"
From mi-linux
Jump to navigationJump to search| Line 7: | Line 7: | ||
== jQuery == | == jQuery == | ||
| + | |||
| + | First you'll need to include the latest stable version of jQuery. You can either: | ||
| + | * Point straight to the version hosted on the official website (quick and easy, but performance issues). | ||
| + | * Download the library, upload it to your website via FTP, and point to your local file. | ||
| + | |||
| + | In both cases, the syntax is the same: | ||
| + | |||
| + | <pre> | ||
| + | <script src="path/to/the/file/jquery-3.1.0.min.js"></script> | ||
| + | </pre> | ||
| + | |||
| + | In this example we'll keep things simple and point to the hosted version: | ||
| + | |||
| + | <pre> | ||
| + | <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> | ||
| + | </pre> | ||
== Client-side == | == Client-side == | ||
| + | |||
| + | First, let's have a look at the webpage itself: | ||
<pre> | <pre> | ||
| Line 40: | Line 58: | ||
</body> | </body> | ||
</html> | </html> | ||
| + | </pre> | ||
| + | |||
| + | The HTML is fairly simple. Note the text box, button, and blank paragraph to display the results later on. | ||
| + | |||
| + | The bit of interest is the Ajax jQuery call, here: | ||
| + | |||
| + | <pre> | ||
| + | // This is the Ajax call to "getdata.php" | ||
| + | $.ajax({ | ||
| + | method: "GET", | ||
| + | url: "getdata.php", | ||
| + | data: { searchValue: $('#searchValue').val() } | ||
| + | }) | ||
| + | |||
| + | // And this handles the response | ||
| + | .done(function( response ) { | ||
| + | // Write response to our "results" element | ||
| + | $( "#results" ).html(response); | ||
| + | }); | ||
</pre> | </pre> | ||
Revision as of 12:04, 6 September 2016
Main Page >> Web Application Development >> Workbook >> Template Engines
Ajax with jQuery
Let's implement this very simple Ajax example:
jQuery
First you'll need to include the latest stable version of jQuery. You can either:
- Point straight to the version hosted on the official website (quick and easy, but performance issues).
- Download the library, upload it to your website via FTP, and point to your local file.
In both cases, the syntax is the same:
<script src="path/to/the/file/jquery-3.1.0.min.js"></script>
In this example we'll keep things simple and point to the hosted version:
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
Client-side
First, let's have a look at the webpage itself:
<html>
<head>
<title>Ajax example</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
function DoDearch()
{
// This is the Ajax call to "getdata.php"
$.ajax({
method: "GET",
url: "getdata.php",
data: { searchValue: $('#searchValue').val() }
})
// And this handles the response
.done(function( response ) {
// Write response to our "results" element
$( "#results" ).html(response);
});
}
</script>
</head>
<body>
<h1>Ajax example</h1>
Enter value: <input type="text" id="searchValue">
<input type="button" value="Search" onclick="DoDearch();">
<p id="results"></p>
</body>
</html>
The HTML is fairly simple. Note the text box, button, and blank paragraph to display the results later on.
The bit of interest is the Ajax jQuery call, here:
// This is the Ajax call to "getdata.php"
$.ajax({
method: "GET",
url: "getdata.php",
data: { searchValue: $('#searchValue').val() }
})
// And this handles the response
.done(function( response ) {
// Write response to our "results" element
$( "#results" ).html(response);
});
Server-side
<?php // Retreive value passed from Ajax call $searchValue = $_GET['searchValue']; // Debug message echo "Performing search for ".$searchValue."..."; // Connect to database // Build SQL statement // Run SQL statement // Loop through results and display ?>
