trying to post json object from javascript to php

Question

I am trying to send form data in json format to php for process with sql but somehow it's not working, I am bit confuse with ajax and json thing, and very sure not doing right syntax, please help

function testObj(){      
        var obj = {"firstkey":"firstvalue","secondkey":"secondvalue"};
    $.ajax({ type: 'POST', url: 'testPht.php', data: {json: obj},
    dataType: 'json' });                      
}  

    <form id="theForm" enctype="multipart/form-data">                  
    <select id="itemsList" name="select_pro" onchange="testObj()" >
        <option>SELECT PRODUCT</option>
        <option value="21">KEY CHAIN</option>
        <option value="22">BISCUITS</option>
        </select>
        <input value="submit" type="submit"></form>

        <?php
        $json = json_decode($_POST['json']);
        var_dump($json);

Answer 1

json_decode takes string as parameter. You just need to you can avoid use of json_decode and receive json data as php array from $_POST['json']

otherwise use stringify json data with JSON.stringify() function.

$.ajax({
  type: 'POST',
  url: 'test.php',
  data: {
    json: JSON.stringify(obj)
  },
  dataType: 'json'
});

Answer 2

Add contentType : 'application/json' to ajax method.

$.ajax({
    contentType : 'application/json',
    type : 'POST',
    ...

Answer 3

I created and tested example that works:

index.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function testObj(){      
    var json = '{"firstkey":"firstvalue","secondkey":"secondvalue"}';
    $.ajax({ type: 'POST', url: 'ajax.php', data: {json: json}, success : function(data){
        alert(data);
    }});                      
}  
</script>


<form id="theForm" action="" type="post">                  
    <select id="itemsList" name="select_pro" onchange="testObj()" >
        <option>SELECT PRODUCT</option>
        <option value="21">KEY CHAIN</option>
        <option value="22">BISCUITS</option>
    </select>
    <input value="submit" type="submit">
</form>

ajax.php

$json = $_POST['json'];
$json = json_decode($json);
echo 'Received:';
var_dump($json);

or just:

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

You create two script index.php and ajax.php with this content and you will see when change select alerted data from ajax.

Answer 4

Try this, please include jquery first:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
$(document).ready(function()
{
        $(#submit).click(function()
        {
        var obj = {"firstkey":"firstvalue","secondkey":"secondvalue"};
        $("#itemsList option:selected").text();

        $.post("testPht.php",{obj:obj},function(data)
            {
            alert(data);
            });
        });
});
</script>

 <form id="theForm" enctype="multipart/form-data">                  
    <select id="itemsList" name="select_pro" onchange="testObj()" >
        <option>SELECT PRODUCT</option>
        <option value="21">KEY CHAIN</option>
        <option value="22">BISCUITS</option>
    </select>
    <input value="submit" id="submit" type="submit">
</form>

<?php
if($_POST)
{
$json = json_decode($_POST['obj']);
var_dump($json);
}
?>