Question 168368 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Why is jquery post sending empty data?

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>

</head>

<body>
    <div id="all-comments"></div>
    <input type="hidden" name="page_id" value="1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            let page_id = $('input[name="page_id"]').val();
            $.ajax({
                url: 'vender/show_comment.php',
                type: 'POST',
                data: {
                    page_id: page_id
                }
            });
            setTimeout(function() {
                $("#all-comments").load("vender/show_comment.php")
            }, 1000);
        });
    </script>
</body>

show_comment.php

<?php

$page_id=$_POST['page_id'];
 if(empty($page_id))
 $str="I'm empty";
 else
 $str=$page_id; 
?>
<div class="new-comment">
    <p><?php echo $str?></p>
    <p><?php echo $str?></p>
</div>

I take data from input and pass it through ajax, as a result, I get "I’m empty". Why doesn’t it output the input value?

Although when I receive the same data by pressing the button and send them to the server, they will not be empty. But I need to do a data offset when the page loads

Tags:

2

Answers


  1. 0

    You have to wait for the response:

            $.ajax({
            url: 'vender/show_comment.php',
            type: 'POST',
            data: { 'page_id' : page_id },
            success: function(response) {
            $("#all-comments").html(response);
            }
        });
    Login or Signup to reply.
  2. 0

    You are making two different requests.

    The first request is a POST request, with a payload, but you ignore the response.

                $.ajax({
                url: 'vender/show_comment.php',
                type: 'POST',
                data: {
                    page_id: page_id
                }
            });

    The second request is a GET request, without a payload, and you drop the response into the all-comments element.

                $("#all-comments").load("vender/show_comment.php")

    You haven’t done anything to persist the data between two requests.

    You could remove the $.ajax call entirely and make your load call a POST request and include the data there:

    $("#all-comments").load("vender/show_comment.php", { page_id })

    The data still won’t be persisted for subsequent GET requests which is generally a desirable feature of comment systems.

    To do that you’ll need to store the data somewhere (a database is the usual choice) and then retrieve it in subsequent requests.

    Rough pseudo-code would look something along the lines of:

    if IS POST REQUEST
    if DATA IS NOT VALID
        respond with error
    else
        insert data into database
get data from database
generate html
respond with html
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search