Php does not echo the data from a jQuery Ajax submit

Question

I am fiddling with jQuery.ajax() and php, and I need some pointers in order to make everything work:

Here is the php code:

if(!empty($_POST["fname"])){
        $firstName = $_POST["fname"];
        echo $firstName."<br />";
    }
    if(!empty($_POST["id"])){
        $age = $_POST["id"];
        echo $age;
    }

Here is the jQuery code:

jQuery("#ajaxForm").submit(function(event){
    event.preventDefault();

    var firstName = jQuery("#firstName").val();
    var age = jQuery("#age").val();

    // jQuery.ajax() - Perform an asynchronous HTTP (Ajax) request.
    jQuery.ajax({
        type: "POST",
        url: "http://localhost/profiling/index.php",
        data: {fname:firstName, id:age}
    }).done(function(result){
        alert("Your data has been submitted!" + firstName);
    });
    var result;
    console.log(result);

});

The values from jQuery exist, I get the alert, telling me the data has been submitted, firebug shows the Ajax post as working.

Why doesn't php gets my data and echo it?

because you're not doing it. Recieve date from that php and append it in some div — Mercurial, May 08 '13 at 23:22
I have added the console.log(result), update my question - result is undefined — webmasters, May 08 '13 at 23:23
It's undefined because you declared it again before you logged it. See my answer below. — chuckieDub, May 08 '13 at 23:29

score 1 · Answer 1 · edited May 08 '13 at 23:57

1

You need to get the returned data by the php and do something with it. See the added line of code below.

jQuery("#ajaxForm").submit(function(event){
event.preventDefault();

    var firstName = jQuery("#firstName").val();
    var age = jQuery("#age").val();

    // jQuery.ajax() - Perform an asynchronous HTTP (Ajax) request.
    jQuery.ajax({
        type: "POST",
        url: "http://localhost/profiling/index.php",
        data: {fname:firstName, id:age}
    }).done(function(result){
        alert("Your data has been submitted!" + firstName);
        alert("This is the data returned by the php script: " + result)
    });

});

edited May 08 '13 at 23:57

Loolooii

8,588
14
66
90

answered May 08 '13 at 23:25

chuckieDub

1,767
9
27
46

Ty! Weird, the result - alerts me and gives me the whole content of the page. – webmasters May 08 '13 at 23:28
I may not understand the ajax very well, shouldn't the echo $_POST["fname"] work after the ajax submit? – webmasters May 08 '13 at 23:29
What else is contained in the php script? – chuckieDub May 08 '13 at 23:30
Yep, so, just write a very short script that returns just fname if that's all you want. – chuckieDub May 08 '13 at 23:33

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

You have to use the success callback function to process the response from the POST to your Php page.

As stated in this thread

Your code could look similar to the following:

  /* Send the data using post and put the results in a div */
$.ajax({
  url: "test.php",
  type: "post",
  data: values,
  success: function(returnval){
      alert("success");
       $("#result").html('submitted successfully:' + returnval);
  },
  error:function(){
      alert("failure");
      $("#result").html('there is error while submit');
  }   
});

So, you have to somehow append the response from your Php to an HTML element like a DIV using jQuery

Hope this helps you

edited May 23 '17 at 10:25

Community

1
1

answered May 08 '13 at 23:23

juanreyesv

853
9
22

$_POST["fname"] - I should be able to echo this after the Ajax submit – webmasters May 08 '13 at 23:25
1

additionaly, add a datatype. Html or json. – Mercurial May 08 '13 at 23:29
@webmasters Yes, your Php is fine, you are able to echo the $_POST["fname"] variable, but then how does the HTML knows that it has to show that value? That is when jQuery comes to action by displaying the Php echoed value somewhere in your page. Does that makes any sense? – juanreyesv May 08 '13 at 23:32
I see, that makes sense, cause I'm not refreshing the page... but how do I do that? – webmasters May 08 '13 at 23:34
@webmasters that is the beauty of it, you don't have to refresh the page. jQuery will only 'refresh' the part of the page that you want to update and you can achieve that by using the success callback function in your jQuery code as I stated on the answer – juanreyesv May 08 '13 at 23:37
1

@juanreyesv that script doesn't do anything with the returned data. – chuckieDub May 08 '13 at 23:38
I got it ;) - Ty ty - for example, I could call another scrip which does something with jQuery;s submitted data, and then append it to a div - so this is how it work ;) – webmasters May 08 '13 at 23:39

score 0 · Answer 3 · answered Oct 23 '14 at 20:33

The correct way:

<?php
$change = array('key1' => $var1, 'key2' => $var2, 'key3' => $var3);
echo json_encode(change);
?>

Then the jquery script:

<script>
$.get("location.php", function(data){
var duce = jQuery.parseJSON(data);
var art1 = duce.key1;
var art2 = duce.key2;
var art3 = duce.key3;
});
</script>

Php does not echo the data from a jQuery Ajax submit

3 Answers3