How to return data from PHP to a jQuery ajax call
I figured it out. Need to use echo in PHP instead of return.
<?php
$output = some_function();
echo $output;
?>
And the jQ:success: function(data) {
doSomething(data);
}
Returning data from Ajax to PHP
I would suggest a JSON-answer from your PHP-backend, something like:
{
"filename": "my_image.jpg",
"message": "Image uploaded!",
"success": true
}
Which would be something like:<?php
define('UPLOAD_DIR', 'uploads/');
$img = $_POST['base64image'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR .date("d-m-Y")."_".uniqid(). '.jpg';
$success = file_put_contents($file, $data);
$cliente_foto_webcam = $file;
if ($success) {
echo json_encode([
"filename" => $cliente_foto_webcam,
"message" => "Image uploaded!",
"success" => true
]);
} else {
echo json_encode([
"filename" => null,
"message" => "Couldn't upload image",
"success" => false
]);
}
?>
Using Jquery Ajax to retrieve data from Mysql
For retrieving data using Ajax + jQuery, you should write the following code:
<html>
<script type="text/javascript" src="jquery-1.3.2.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("#display").click(function() {
$.ajax({ //create an ajax request to display.php
type: "GET",
url: "display.php",
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
</script>
<body>
<h3 align="center">Manage Student Details</h3>
<table border="1" align="center">
<tr>
<td> <input type="button" id="display" value="Display All Data" /> </td>
</tr>
</table>
<div id="responsecontainer" align="center">
</div>
</body>
</html>
For mysqli connection, write this:<?php
$con=mysqli_connect("localhost","root","");
For displaying the data from database, you should write this :<?php
include("connection.php");
mysqli_select_db("samples",$con);
$result=mysqli_query("select * from student",$con);
echo "<table border='1' >
<tr>
<td align=center> <b>Roll No</b></td>
<td align=center><b>Name</b></td>
<td align=center><b>Address</b></td>
<td align=center><b>Stream</b></td></td>
<td align=center><b>Status</b></td>";
while($data = mysqli_fetch_row($result))
{
echo "<tr>";
echo "<td align=center>$data[0]</td>";
echo "<td align=center>$data[1]</td>";
echo "<td align=center>$data[2]</td>";
echo "<td align=center>$data[3]</td>";
echo "<td align=center>$data[4]</td>";
echo "</tr>";
}
echo "</table>";
?>
post ajax data to PHP and return data
$.ajax({
type: "POST",
data: {data:the_id},
url: "http://localhost/test/index.php/data/count_votes",
success: function(data){
//data will contain the vote count echoed by the controller i.e.
"yourVoteCount"
//then append the result where ever you want like
$("span#votes_number").html(data); //data will be containing the vote count which you have echoed from the controller
}
});
in the controller $data = $_POST['data']; //$data will contain the_id
//do some processing
echo "yourVoteCount";
Clarificationi think you are confusing
{data:the_id}
with success:function(data){
both the data
are different for your own clarity sake you can modify it assuccess:function(vote_count){
$(span#someId).html(vote_count);
jQuery Ajax POST example with PHP
Basic usage of .ajax
would look something like this:
HTML:
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form>
jQuery:// Variable to hold request
var request;
// Bind to the submit event of our form
$("#foo").submit(function(event){
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);
// Fire off the request to /form.php
request = $.ajax({
url: "/form.php",
type: "post",
data: serializedData
});
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});
// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});
// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
});
Note: Since jQuery 1.8, .success()
, .error()
and .complete()
are deprecated in favor of .done()
, .fail()
and .always()
.Note: Remember that the above snippet has to be done after DOM ready, so you should put it inside a $(document).ready()
handler (or use the $()
shorthand).
Tip: You can chain the callback handlers like this: $.ajax().done().fail().always();
PHP (that is, form.php):
// You can access the values posted by jQuery.ajax
// through the global variable $_POST, like this:
$bar = isset($_POST['bar']) ? $_POST['bar'] : null;
Note: Always sanitize posted data, to prevent injections and other malicious code.You could also use the shorthand .post
in place of .ajax
in the above JavaScript code:
$.post('/form.php', serializedData, function(response) {
// Log the response to the console
console.log("Response: "+response);
});
Note: The above JavaScript code is made to work with jQuery 1.8 and later, but it should work with previous versions down to jQuery 1.5.
Related Topics
Speeding Up Large Numbers of MySQL Updates and Inserts
Mongodb: Benefit of Using Objectid VS a String Containing an Id
How to Make Ruby Aes-256-Cbc and PHP Mcrypt_Rijndael_128 Play Well Together
PHP Pdo Bindparam Was Falling in a Foreach
Should a Function Use: Return Null;
How to Pass an Array into a PHP Soapclient Call
Calculate the Difference Between 2 Timestamps in PHP
How Does This Pcre Pattern Detect Palindromes
Save Accents in MySQL Database
Converting Between Timezones in PHP
Difference Between $_Server['Document_Root'] and $_Server['Http_Host']
How to Add 5 Minutes to Current Datetime on PHP < 5.3
Where to Store Database Login Credentials for a PHP Application
Laravel and Multi-Sessions from the Same Browser
PHP Splitting an Array into Two Arrays - Keys Array and Values Array