Return value from Ajax [duplicate] - javascript

This question already has answers here:
Get response from PHP file using AJAX
(5 answers)
Closed 5 years ago.
I'm new to programming and i'm not good at all with Ajax.
I want to get a value back from a php script in Ajax.
I send a javascript variable to a php script like that :
$('#deleteSelectedButton').on('click', function () {
if (confirm('Do you want to suppress the messages ?')) {
$.ajax({
type: 'POST',
url: 'suppression-message',
data: {
'checkboxIdArray': checkboxIdArray.toString(),
}
});
return false;
}
});
This is sent to the following php script which is deleting messages according to the id contained in the checkboxIdArray:
if (isset($_POST['checkboxIdArray'])) {
$checkboxIdArray = $_POST['checkboxIdArray'];
$str = json_encode($checkboxIdArray);
$tab = explode(",", $str);
$deleteSuccess = true;
foreach($tab as $id)
{
$id = filter_var($id, FILTER_SANITIZE_NUMBER_INT);
if (!$messageModelDb->delete($id)) {
$deleteSuccess = false;
die();
}
}
if ($deleteSuccess === true) {
$message = 'Success';;
} else {
$message= "Error";
}
}
I want to get the $message variable back to my javascript in order to display a message according to the result of the script.
I would really appreciate some help ...
Thank you.

You have to use success function and actually include the message in the response
$.ajax({
type: 'POST',
url: 'suppression-message',
data: {
'checkboxIdArray': checkboxIdArray.toString(),
},
success : function(response){
// your code or logic
alert(response);
}
});
PHP
if ($deleteSuccess === true) {
$message = 'Success';
} else {
$message= "Error";
}
echo $message;

$('#deleteSelectedButton').on('click', function () {
if (confirm('Do you want to suppress the messages ?')) {
$.ajax({
type: 'POST',
url: 'suppression-message',
data: {
'checkboxIdArray': checkboxIdArray.toString(),
},
success: function(response){
alert(response);
}
});
return false;
}
});

There is nothing special about an HTTP request made with JavaScript.
You output data in the response to it in from PHP in the same way as any other HTTP response.
echo $message;
In JavaScript, you process it as described in the documentation for jQuery.ajax.
Write a function that accepts a the response content as the first argument.
Then call done on the jqXHR object that .ajax returns and pass it that function.
function handleResponse(data) {
alert(data);
}
var jqXHR = $.ajax({
type: 'POST',
url: 'suppression-message',
data: {
'checkboxIdArray': checkboxIdArray.toString(),
}
});
jqXHR.done(handleResponse);

Try out the code to get the value in ajax
<script>
$('#deleteSelectedButton').on('click', function () {
if (confirm('Do you want to suppress the messages ?')) {
$.ajax({
type: 'POST',
url: 'suppression-message',
data: {
'checkboxIdArray': checkboxIdArray.toString(),
}
}).done(function(result)
{
alert(result);
});
return false;
}
});
</script>
Here is the php code
<?php
if (isset($_POST['checkboxIdArray'])) {
$checkboxIdArray = $_POST['checkboxIdArray'];
$str = json_encode($checkboxIdArray);
$tab = explode(",", $str);
$deleteSuccess = true;
foreach($tab as $id)
{
$id = filter_var($id, FILTER_SANITIZE_NUMBER_INT);
if (!$messageModelDb->delete($id)) {
$deleteSuccess = false;
die();
}
}
if ($deleteSuccess === true) {
$message = 'Success';;
} else {
$message= "Error";
}
echo $message;
}
?>

Since jQuery implemented deferreds, .done is the preferred way to implement a success callback. You should also implement a .fail method with a failure response code.

Related

PHP not receiving AJAX POST from js File

I have been trying to work this out for hours now and cannot find any answer that helps me.
This is the code in my javascript file
function sendMovement(cel) {
var name = "test";
$.ajax({
type: 'POST',
url: '../game.php',
data: { 'Name': name },
success: function(response) {
console.log("sent");
}
});
}
This is the code from my PHP file (it is outside the js file)
if($_SERVER["REQUEST_METHOD"] == "POST") {
$data = $_POST['Name'];
console_log($data);
}
When debugging I can see that AJAX is sending a POST and it does print in the console "SENT" but it does not print $data
update: the function console_log() exists in my PHP file and it works
Try getting response in JSON format, for that your js should have dataType:'JSON' as shown below
JS Code:-
function sendMovement(cel) {
var name = "test";
$.ajax({
type: 'POST',
dataType:'JSON', //added this it to expect data response in JSON format
url: '../game.php',
data: { 'Name': name },
success: function(response) {
//logging the name from response
console.log(response.Name);
}
});
}
and in the current server side code you are not echoing or returning anything, so nothing would display in ajax response anyways.
changes in php server code:-
if($_SERVER["REQUEST_METHOD"] == "POST") {
$response = array();
$response['Name'] = $_POST['Name'];
//sending the response in JSON format
echo json_encode($response);
}
I fixed it by doing the following:
To my game.php I added the following HTML code (for debugging purposes)
<p style = "color: white;" id="response"></p>
Also added in my game.php the following
if($_SERVER["REQUEST_METHOD"] == "POST") {
$gameID = $_POST['gameID'];
$coord = $_POST['coord'];
$player = $_POST['player'];
echo "gameID: " . $gameID . "\nCoord: " . $coord . "\nPlayer: " . $player;
}
AND in my custom.js I updated
function sendMovement(cel) {
var handle = document.getElementById('response');
var info = [gameID, cel.id, current_player];
$.ajax({
type: 'POST',
url: '../game.php',
data: {
gameID: info[0],
coord: info[1],
player: info[2]
},
success: function(data) {
handle.innerHTML = data;
},
error: function (jqXHR) {
handle.innerText = 'Error: ' + jqXHR.status;
}
});
}

Ajax Alert Response from PHP

Hopefully an easy question here. I actually used an example I found on SO but can't figure out why its not working. No errors in console or anything.
I have an ajax Post function I am using to pass data to a php script.
Its passing the data correct, but the response each time is coming back as an error alert. I can confirm that server side is getting the data and processing it correctly, just can't figure out why its never returning a success response.
Here is the Ajax:
$(function () {
$('#pseudoForm').on('click', '#submit', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "psu_output.php",
data: $('#pseudoForm').serialize(),
datatype: 'json',
success: function (response) {
if(response.type == 'success') {
$('#messages').addClass('alert alert-success').text(response.message);
} else {
$('#messages').addClass('alert alert-danger').text(response.message);
}
}
});
return false;
});
});
</script>
And in my php script I used this:
<?php
$success = true;
if($success == true) {
$output = json_encode(array('type'=>'success', 'message' => 'YAY'));
} else {
$output = json_encode(array('type'=>'error', 'message' => 'WHOOPS'));
}
die($output);
?>
The problem is that datatype: 'json' should be dataType: 'json'. Javascript is case-sensitive.
The error is because you received the returned data as json but the content type is a simple string (text/html) so you need to JSON.parse() the received data first like so:
$(function () {
$('#pseudoForm').on('click', '#submit', function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "psu_output.php",
data: $('#pseudoForm').serialize(),
datatype: 'json',
success: function (response) {
response = JSON.parse(response);
if(response.type == 'success') {
$('#messages').addClass('alert alert-success').text(response.message);
} else {
$('#messages').addClass('alert alert-danger').text(response.message);
}
}
});
return false;
});
});
The second option is to send json headers from php itself thus removing the need of parsing JSON in javascript. You can do that by using the following line of code BEFORE ECHOING OR PRINTING ANYTHING ELSE FROM THE PHP SCRIPT:
header('Content-Type: application/json');
and then
echo $output;
If you are working with JSON responses, you need to set the header so your browser and your JavaScript could interpret it correctly:
<?php
$success = true;
if ($success == true) {
$output = json_encode(array(
'type' => 'success',
'message' => 'YAY'
));
} else {
$output = json_encode(array(
'type' => 'error',
'message' => 'WHOOPS'
));
}
header('Content-Type: application/json');
echo $output;

how to redirect the request to specified php page by ajax call?

how to redirect the request to specified php page by ajax call, below is my code structure
index.html
<html>
<script>
function shift(str)
{
$.ajax({
url: 'destination.php',
type:'POST',
data: {q:str}
}).done(function( data) {
$("#result").html(data);
});
return false;
}
</script>
<body>
<input type='button' value='test' onclick="shift('test');">
<div id='result'></div>
</html>
destination.php
<?php
$string=$_REQUEST['q'];
if($string=="something")
{
header('something.php');
}
else
{
echo "test";
}
?>
this is my code structure if posted string is same as then header funtion should be work else echo something, but header funstion is not working via ajax
You should specify header parameter to Location. Use the code below
<?php
$string=$_REQUEST['q'];
if($string=="something")
{
header('Location:something.php');
}
else
{
echo "test";
}
?>
Hope this helps you
Go With This
You can check the string in jquery like below..
First you must echo the variable in php page.
then,
$.ajax({
url: 'destination.php',
type:'POST',
data: {q:str}
}).done(function( data) {
if(data=="something")
{
window.location.assign("http://www.your_url.com"); //
}
});
return false;
}
You should always retrieve the response in json format and based on that decide where to redirect. use below code for your requirement.
function shift(str) {
$.ajax({
url: 'destination.php',
type: 'POST',
data: {
q: str
}
}).done(function (resp) {
var obj = jQuery.parseJSON(resp);
if (obj.status) {
$("#result").html(obj.data);
} else {
window.location..href = "YOURFILE.php";
}
});
return false;
}
Destination.php
<?php
$string=$_REQUEST['q'];
$array = array();
if($string=="something")
{
$array['status'] = false;
$array['data'] = $string;
}else {
$array['status'] = true;
$array['data'] = $string;
}
echo json_encode($array);
exit;
?>
function shift(str) {
$.ajax({
url: 'destination.php',
type: 'POST',
data: {
q: str
}
}).done(function (data) {
if (data=="something") {
window.location.href = 'something.php';
}
else {
$("#result").html(data);
}
});
return false;
}
in Destination.php
<?php
$string=$_REQUEST['q'];
if($string=="something")
{
echo "something";
}
else
{
echo "test";
}
?>

Jquery AJAX with codeigniter, always returns error

I am trying to write a script that will add the video currently being viewed to a database of favourites. However every time it runs, an error is returned, and nothing is stored in the database.
Here is the JQuery
$(document).ready(function() {
$("#addfav").click(function() {
var form_data = {heading: $("#vidheading").text(), embed : $("#vidembed").text()};
jQuery.ajax({
type:"POST",
url:"localhost/stumble/site/add_to_fav.php",
dataType: "json",
data: form_data,
success: function (data){
console.log(data.status);
alert("This Video Has Been Added To Your Favourites")
},
error: function (data){
console.log(data.status);
alert("You Must Be Logged In to Do That")
}
});
})
})
The add_to_fav.php is this...
public function add_to_fav(){
$this->load->model('model_users');
$this->model_users->add_favs();
}
And the add_favs function is below
public function add_favs(){
if($this->session->userdata('username')){
$data = array(
'username' => $this->session->userdata('username'),
'title' => $this->input->post('heading'),
'embed' => $this->input->post('embed')
);
$query = $this->db->insert('fav_videos',$data);
if($query){
$response_array['status'] = 'success';
echo json_encode($response_array);
}}else {
$response_array['status'] = 'error';
echo json_encode($response_array);
}
}
Thank you for the input, this has me stuck but I am aware it may be something relatively simple, my hunch is that it is something to do with returning success or error.
Try
$(document).ready(function() {
$("#addfav").click(function() {
var form_data = {heading: $("#vidheading").text(), embed : $("#vidembed").text()};
jQuery.ajax({
type:"POST",
url:"http://localhost/stumble/Site/add_to_fav",
dataType: "json",
data: form_data,
success: function (data){
console.log(data.status);
alert("This Video Has Been Added To Your Favourites")
},
error: function (data){
console.log(data.status);
alert("You Must Be Logged In to Do That")
}
});
})
})
Also to use base_url in javascript. In your template view :-
<script>
window.base_url = "<?php echo base_url(); ?>";
</script>
Now you can use base_url in all your ajax scripts.

jQuery $.ajax success not returning anything?

I looked at the Network tab in chrome and it's sending the right data (action, username, password) but it's not returning the message into $('#return_login'). What is wrong with my code?
jQuery:
$(function() {
$('.login').hide();
$('#login').click(function() {
event.preventDefault();
$('.login').fadeIn(500);
$('#login_submit').click(function() {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: './controller',
type: 'POST',
data: 'action=login&username=' + username + "&password=" + password,
success: function(return_login) {
$('#return_login').html(return_login);
}
});
});
});
});
PHP (Methods class isn't used at all, ignore it):
<?php
require_once('Methods.php');
$Methods = new Methods;
$action = #$_POST['action'];
switch($action) {
case 'login':
echo 'lol';
break;
}
?>
$.ajax({
url: '/controller',
type: 'POST',
data:{action:'login',username:username,password:password},
success: function(return_login) {
$('#return_login').html(return_login);
}
});
//php
$action = #$_POST['action'];
And in the php make sure to put an exit after the switch statment
Try sending data in json format:
data:{action:'login',username:username,password:password}

Categories