Retrieving Data From Database And Displaying It By Using Ajax
Solution 1:
Working with ajax, at the beginning, can be very frustrating. You should start with more simple task, simply to understand what you're working with. Start with something like this, a simple request that send two numbers to the server and then alert the sum
ajax_request.php
<?php
$num1 = isset( $_GET[ "num1" ] ) ? $_GET[ "num1" ]: 0;
$num2 = isset( $_GET[ "num2" ] ) ? $_GET[ "num2" ]: 0;
echo $num1 + $num2;
index.html
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function () {
$( "#calculate" ).click(function(e) {
e.preventDefault();
$.ajax({
url: 'ajax_request.php',
data: $( "#form" ).serialize(),
success: function( data ) {
alert( data );
},
error: function() {
alert( "Something went wrong" );
}
});
});
});
</script>
</head>
<body>
<form id="form">
Num1: <input type="text" name="num1" /><br />
Num2: <input type="text" name="num2" /><br />
<input type="submit" id="calculate" />
</form>
</body>
</html>
Open index.html (download the jQuery library), fill the two numbers and click the button. You can test the "Something went wrong", simply put a wrong url (ajax_requestx.php instead of ajax_request.php). From here, you can study "ajax" and "jQuery" to understand better how this work.
The concept is this: you stop the form to be sent (e.preventDefault()) and instead send the form in "asyncronous" way, making javascript send the request to the server without changing the page; in the "success" function you can analyze the string sent back from the server and do something with it. All done by javascript
Post a Comment for "Retrieving Data From Database And Displaying It By Using Ajax"