Question posted in
You can find the official documentation here.

Jquery ajax – AJAX Request Payload not showing up in console log

I am learning AJAX and I am trying to log all the data parameters in the console in case of success and in case of a failure to throw an alert. My code works and I can successfully dump the data I send, but nothing shows up in the console, even though I explicitly put console.log within the Javascript to register that.
this is my code.
Html page

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <h2>Send JSON</h2>
  <form action="postrequest.php" class="js-ajax-php-json" method="post" accept-charset="utf-8">
  <input type="text" name="param1"/>
  <input type="text" name="param2"/>
  <input type="text" name="param3"/>
  <button type="submit">Submit</button>
</form>


</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  $("document").ready(function(){
    $(".js-ajax-php-json").submit(function(){
     var param1 = $("#param1").val();
     var param2 = $("#param2").val();
     var param3 = $("#param3").val();
    $.ajax({
  url : 'postrequest.php',
  contentType: "application/json",
  dataType: "json",  
  type : 'POST',
  data: JSON.stringify({ 
    param1: param1,
    param2: param2,
    param3: param3
  }),
  success: function(data) {
            console.log(data);
        },
  error: function (data) {
    alert(data.param3);
  }       
       });
  });
});

</script>
</html>

postrequest.php

<?php 

var_dump( $_POST);

What am I doing wrong?

Tags:

2

Answers


  1. 0

    I think the root cause is that the page is reloading once you hit submit. Hence you cannot see anything in the console. Try the following steps.

    1. Remove the ‘action’ and ‘method’ attributes from the form tag. This is already handled in ajax request.
    2. Add onsubmit=”return false;” attribute to the form tag. This will prevent reloading of the page.
    Login or Signup to reply.
  2. 0

    Error 1: Remove the form tag. It will work because it contains action=”postrequest.php”. You are doing 2 things at the same time.

    1. Submitting the form via PHP using the form tag.
    2. You are performing ajax and submitting the form.

    Error 2: You are writing var param1 = $("#param1").val(); Where is the param1, param2,param3 you defined?

    Error 3: You are giving the jquery link, you don’t have closed the script tag.

    Error 4: You are sending the data in ajax and outputting the ajax response again with the same variable

    Error 5: Ajax error block you have created is wrong.

     <!DOCTYPE html>
    <html>
    <body>
      <input type="text" name="param1" id="param1"/>
      <input type="text" name="param2" id="param2"/>
      <input type="text" name="param3" id="param3"/>
      <input type="button" value='Submit' class="js-ajax-php-json" />

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script type="text/javascript">
         $(document).ready(function() {
            $(".js-ajax-php-json").click(function() {

                var param1 = $("#param1").val();
                var param2 = $("#param2").val();
                var param3 = $("#param3").val();
                $.ajax({
                    url: 'postrequest.php',
                    dataType: "html",
                    type: 'post',
                    data: {
                        param1: param1,
                        param2: param2,
                        param3: param3
                    },
                    success: function(rsp) {
                        console.log(rsp);
                    },
                    error: function(jqXHR, status, err) {
                        console.log("Error");
                    },
                });
            });
        });
      </script>
      </body>
    </html>

    postrequest.php page

    <?php
  print_r($_POST);
?>

    I have just rewritten your code with a very simpler one. You can
    change it as per your requirement.

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

Back To Top
Search