CODEWITHSUNDEEP
phpjqueryajax
Jimmy
Jimmy

Reputation: 137

How to get the return value of a php function when calling from jQuery?

I have a php function return a string value which will put into html file.

function getDirectionInfo($routeNumber) {
    //some code here
    $dirinfo = "<p> some text </p>";
    return $dirinfo;
}

if (isset($_POST['getDirectionInfo'])) {
    getDirectionInfo($_POST['getDirectionInfo']);
}

So in jQuery, I have a following function

$(".onebtn").click(function(){
    $("#directioninfo").empty();
    var routeNumber = $(this).text();
    $.ajax({
        url: "./systemView_Function.php",
        type: "POST",
        data: {"getDirectionInfo": routeNumber},
        success: function(data) {   
            console.log("HIHIHIHI");
            $("#directioninfo").append(data);
        }
    });
})

Now console.log prints the "HIHIHIHIHI", but jQuery does not append the data to html. Anyone know how to get the return value of php function when calling from jQuery?

Upvotes: 1

Views: 5631

Answers (3)

Jimmy
Jimmy

Reputation: 137

Thank you for everyone. I have just found that I made a very stupid mistake in jQuery. I should use var routeNumber = parseInt($(this).text()); instead of var routeNumber = $(this).text(); So the following code work to get the return value of php function when calling from jQuery.

in php

function getDirectionInfo($routeNumber) {
    //some code here
    $dirinfo = "<p> some text </p>";
    echo json_encode($dirinfo);
}

if (isset($_POST['getDirectionInfo'])) {
    getDirectionInfo($_POST['getDirectionInfo']);
}

in jQuery

$(".onebtn").click(function(){
    $("#directioninfo").empty();
    var routeNumber = parseInt($(this).text());
    $.ajax({
        url: "./systemView_Function.php",
        type: "POST",
        data: {"getDirectionInfo": routeNumber},
        dataType: "JSON",
        success: function(data) {   
            $("#directioninfo").append(data);
        }
    });
})

Upvotes: 0

meda
meda

Reputation: 45490

  1. You just need to send the response back using echo

  2. Use var routeNumber = $(this).val(); to get the button value

PHP:

<?php
function getDirectionInfo($routeNumber) {
    //some code here
    $dirinfo = "<p> routeNumber". $routeNumber." </p>";
    return $dirinfo;
}

if (isset($_POST['getDirectionInfo'])) {
    echo getDirectionInfo($_POST['getDirectionInfo']);
}else{
    echo "not set";
}

AJAX & HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
	$(".onebtn").click(function(){
		$("#directioninfo").empty();
		var routeNumber = $(this).val();
		console.log("routeNumber = " + routeNumber);
		$.ajax({
			url: "systemView_Function.php",
			type: "POST",
			data: {"getDirectionInfo": routeNumber},
			success: function(data) {   
				console.log("data = " + data);
				$("#directioninfo").append(data);
			}
		});
	})
});
</script>
</head>
<body>
	<div id="directioninfo"></div>
	<input type="button" value="12346" class="onebtn" />
</body>
</html>

Upvotes: 1

marian0
marian0

Reputation: 3337

Instead of return use:

echo json_encode($dirinfo);
die;

It's also good idea to add dataType field to your $.ajax() function params set to json, to make sure, that data in your success function will be properly parsed.

Upvotes: 4

Related Questions