Difference between revisions of "PHPAJAX"
From mi-linux
Jump to navigationJump to searchLine 65: | Line 65: | ||
<pre> | <pre> | ||
− | + | // This is the Ajax call to "getdata.php" | |
− | + | $.ajax({ | |
− | + | method: "GET", | |
− | + | url: "getdata.php", | |
− | + | data: { searchValue: $('#searchValue').val() } | |
− | + | }) | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</pre> | </pre> | ||
+ | |||
+ | Once the response comes back from the server, this bit of code decides what to do: | ||
+ | |||
+ | <pre> | ||
+ | // And this handles the response | ||
+ | .done(function( response ) { | ||
+ | // Write response to our "results" element | ||
+ | $( "#results" ).html(response); | ||
+ | }); | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | In this case, we simply display the result ("response" variable) in our blank paragraph element ("results"). | ||
== Server-side == | == Server-side == |
Revision as of 12:13, 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() } })
Once the response comes back from the server, this bit of code decides what to do:
// And this handles the response .done(function( response ) { // Write response to our "results" element $( "#results" ).html(response); });
In this case, we simply display the result ("response" variable) in our blank paragraph element ("results").
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 ?>