How to send json to php via ajax?

Question

I have a form that collect user info. I encode those info into JSON and send to php to be sent to mysql db via AJAX. Below is the script I placed before </body>.

The problem now is, the result is not being alerted as it supposed to be. SO I believe ajax request was not made properly? Can anyone help on this please?Thanks.

<script>
    $(document).ready(function() {
    $("#submit").click(function() {
        var param2 = <?php echo $param = json_encode($_POST); ?>;
        if (param2 && typeof param2 !== 'undefined')
        {
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: param2,
                cache: false,
                success: function(result) {
                    alert(result);
                }
            });
        }
    });
});
</script>

ajaxsubmit.php

<?php
$phpArray = json_decode($param2);
print_r($phpArray);
?>

Answer 1

You'll need to add quotes surrounding your JSON string.

var param2 = '<?php echo $param = json_encode($_POST); ?>';

Answer 2

As far as I am able to understand, you are doing it all wrong.

Suppose you have a form which id is "someForm"

Then

$(document).ready(function () {
    $("#submit").click(function () {
        $.ajax({
            type: "POST",
            url: "ajaxsubmit.php",
            data: $('#someForm').serialize(),
            cache: false,
            success: function (result) {
                alert(result);
            }
        });
    }
    });
});

In PHP, you will have something like this

$str = "first=myName&arr[]=foo+bar&arr[]=baz";

to decode

parse_str($str, $output);
echo $output['first'];  // myName

For JSON Output

echo json_encode($output);

Answer 3

If you are returning JSON as a ajax response then firstly you have define the data type of the response in AJAX.

try it.

 <script>
        $(document).ready(function(){  
$("#submit").click(function(){
      var param2 = <?php echo $param = json_encode($_POST); ?>
            if( param2  && typeof param2 !== 'undefined' )
                     {
                  $.ajax({
            type: "POST",
            url: "ajaxsubmit.php",
            data: dataString,
            cache: false,
            dataType: "json",
            success: function(result){
            alert(result);
            }
              });}
            });
});
    </script>

Answer 4

It's just really simple!

$(document).ready(function () {
    var jsonData = {
                    "data" : {"name" : "Randika",
                               "age" : 26,
                            "gender" : "male"
                     }
                  };
  
    $("#getButton").on('click',function(){
     console.log("Retrieve JSON");
        $.ajax({
            url : "http://your/API/Endpoint/URL",
            type: "POST",
            datatype: 'json',
            data: jsonData,
            success: function(data) {
                console.log(data);  // any response returned from the server.
            }
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" value="POST JSON" id="getButton">

For your further readings and reference please follow the links bellow:

1. Link 1 - jQuery official doc
2. Link 2 - Various types of POSTs and AJAX uses.

In my example, code snippet PHP server side should be something like as follows:

 <?php
    $data = $_POST["data"];
    echo json_encode($data);  // To print JSON Data in PHP, sent from client  side we need to **json_encode()** it.
    // When we are going to use the JSON sent from client side as PHP Variables (arrays and integers, and strings) we need to **json_decode()** it

    if($data != null) {
       $data = json_decode($data);
       $name = $data["name"];
       $age = $data["age"]; 
       $gender = $data["gender"];
       // here you can use the JSON Data sent from the client side, name, age and gender.
    }
 ?>

Again a code snippet more related to your question.

     // May be your following line is what doing the wrong thing
    var param2 = <?php echo $param = json_encode($_POST); ?>
  
    // so let's see if param2 have the reall json encoded data which you expected by printing it into the console and also as a comment via PHP.
  
     console.log("param2 "+param2);
     <?php echo "// ".$param; ?>

Answer 5

After some research on the google , I found the answer which alerts the result in JSON!

Thanks for everyone for your time and effort!

<script>
$("document").ready(function(){
  $(".form").submit(function(){
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
      type: "POST",
      dataType: "json",
      url: "response.php", //Relative or absolute path to response.php file
      data: data,
      success: function(data) {
        $(".the-return").html(
          "<br />JSON: " + data["json"]
        );

        alert("Form submitted successfully.\nReturned json: " + data["json"]);
      }
    });
    return false;
  });
});

</script>

response.php

<?php
if (is_ajax()) {
  if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
    $action = $_POST["action"];
    switch($action) { //Switch case for value of action
      case "test": test_function(); break;
    }
  }
}

//Function to check if the request is an AJAX request
function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test_function(){
  $return = $_POST;


  echo json_encode($return);

}
?>

Here's the reference link : http://labs.jonsuh.com/jquery-ajax-php-json/