0

I am trying to send a JSON string to a PHP file via ajax. The issue is that the variable I'm posting over is not being delivered when I use the JQUERY ajax method as shown below:

<DOCTYPE html>
  <html>

  <head>

    <title>Assignment 4</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>


    <div class="col-sm-4"></div>

    <div class="col-sm-4">

      <form action="json.php" method="POST">
        <div class="form-group">
          <label for="email">Username:</label>
          <input type="text" class="form-control" id="userid" name="userid">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd" name="pwd">
        </div>
        <button type="submit" class="btn btn-default" id='btn' onclick="JSONstring()">Submit</button>
      </form>

    </div>

    <div class="col-sm-4"></div>

    <script>
      function JSONstring() {
        obj = {
          username: "",
          password: "",
        }

        obj.username = document.getElementById('userid').value;
        obj.password = document.getElementById('pwd').value;

        console.log(obj.username + ", " + obj.password);

        var jsonObj = JSON.stringify(obj);

        $.ajax({
          type: 'POST',
          url: 'json.php',
          data: {
            json: jsonObj
          },
          dataType: 'json'
        });




      }
    </script>

  </body>

  </html>

Oddly enough when I try and AJAX the old fashioned way, I am able to get the RAW POST data that I would expect:

var jsonObj = JSON.stringify(obj);

request = new XMLHttpRequest();

request.open("POST", "json.php", true);

request.setRequestHeader("Content-type", "application/json");

request.send(obj);

My php file is simply trying to get the variable and dump it:

    <?php


   $directions = json_decode($_POST['json']);
    var_dump($directions);

?>

Can someone please point me in the right direction?

Gilbert Comeau
  • 33
  • 1
  • 6
  • Possible duplicate of [Receive JSON POST with PHP](http://stackoverflow.com/questions/18866571/receive-json-post-with-php) – Schlaus Apr 02 '17 at 20:00
  • Try to remove -> `dataType: 'json'` what you are sending is not json, it's a post request with json. – Ahmad Apr 02 '17 at 20:00
  • I think JQuery automatically converts the object to string. So you should not need JSON.stringify(obj). Also check the value of the $_POST variable in json.php. Your json string might by in a different variables inside $_POST – Nadir Latif Apr 04 '17 at 07:08

1 Answers1

0

dataType only means that you expect a JSON response.

Try using contentType instead.

$.ajax({
      type: 'POST',
      contentType: "application/json",
      url: 'json.php',
      data: {
        json: jsonObj
      },
      dataType: 'json'
    });
SunriseM
  • 985
  • 9
  • 15