Question posted in
You can find the official documentation here.

JQuery AJAX Post data undefined barebones example

HTML:

<html>
   <head>
      <title>Page Title</title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

      <script src="script.js"></script>
   </head>
   <body>
      <button onclick="Posty()">click</button>
      <p id="result"></p>
   </body>
</html>

script.js:

function Posty() {
   var pointless = "i am indeed";

   $.post("server.php", pointless, PostyReturned());
}

function PostyReturned(data) {
   var output = document.getElementById("result");

   output.innerHTML = data;
}

server.php:

<?php 
$array = [
   "foo" => "bar",
   "bar" => "foo",
];

echo(json_encode($array));
die();
?>

I have simplified the code that is giving me an error as much as possible to save your time. When I click the button the #result tag becomes "undefined". In chrome DevTools I can see the request actually returns:

{"foo":"bar","bar":"foo"}

I know the error is stupidly simple but I have read every single related error post I could find, I have read all the docs and none have helped so I now posting it myself to hopefully end my suffering.

Cheers a bunch in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks Shakima, your solution is great. It just so happens that I solved the problem just before I saw your reply. I believe as you stated that when I wrote PostyReturned() it is calling the function straight away synchronously instead of assigning it as the success function as intended. Your solution assigns the success function as a function which calls PostyReturned which works just fine.

    The better solution, however, is to remove the parentheses after the name of the function so it does not immediately call the function but instead only give a reference.

    function Posty() {
    var pointless = "i am indeed";

    $.post("server.php", pointless, PostyReturned);
}

function PostyReturned(data) {
    var output = document.getElementById("result");

    output.innerHTML = data;
}

    This code works as I originally intended. yay :)


  2. 0

    It looks like you need to pass the data from the post result into your PostyReturned() function. I don’t know the full specifics but, the root of the problem lies in the order in which these functions are executed. The $.post function is asynchronous and your function is synchronous. I found this article to be helpful in breaking this down better than I can explain right now.

    I adjusted the code to have the success function pass the data from the post result into your PostyReturned() function. This now works as intended:

         function Posty() {
            var pointless = "i am indeed";
            $.post("server.php", pointless, function(data) {PostyReturned(data)});
        }

        function PostyReturned(data) {
            var output = document.getElementById("result");
            output.innerHTML = data;
        }

    Result from adjusted function:

    result from JavaScript post function

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search