Use Ajax to POST and GET in the same PHP file (JSON)

Question

I'm trying to reach for a result passing by two steps :

The first step I want to POST a value in PHP file from HTML(dropdown list):

this what I tried :

<select class="pam" >
<option value=""></option>
<?php
$conn_string = "host=localhost port=5432 dbname=pame user=postgres password=";
$conn = pg_connect($conn_string); 
 $sql = pg_query($conn, "SELECT * FROM espece order by nom_com  ASC ");

while($ligne_liste=pg_fetch_array($sql)) {
    echo '<option value="'.$ligne_liste['id_espece'].'">'.$ligne_liste['nom_com']."</option>\n";
}
echo '</select>';
?>

The JS code I used :

jQuery(document).ready(function($) { 
      $('select.pam').change(function(){
         $.post ('/charta.php',
            {id_espece:$('select.pam').val()},
           success: function(){  
                  alert('success');
                  window.location = "http://localhost/charta.php";
            } 
            );
         });
    });

My PHP file :

<?php  

$user_id = isset($_POST["id_espece"])?$_POST["id_espece"]:"";
$user=conn ($user_id) // conn is a function who return an array from database
$js = json_decode( $user, true );
   ?>
  <?php 
   echo json_encode($js); ?>

the problem here is I get "NULL" for the value of $_POST ('id_espece') even though the value selected from the dropdown list; but When I replace the success function with :

function(res){ $('#txt').html(res); }

It returnes the result i want (JSON output) in the <div id="txt"></div> but not in the PHP file when it return an error that `

'undefined index : id_espece'`

The seccond step I want to GET the output of the same PHP file to HTML (div):

If we supposed that PHP file works and sent a JSON form I tried to GET the result in JS file like this :

$(document).ready(function(){
    $.ajax({
    url: "http://localhost/charta.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var region = [];
        var sup = [];

        for(var i in data) {
            region.push("region " + data[i].nom_reg_12);
            sup.push(data[i].aq);
        }
        var chartdata = {
            labels: region,
            datasets : [
                {
                    label: 'Superficie(m²)',
                    backgroundColor: 'rgba(77, 214, 104, 0.75)',
                    borderColor: 'rgba(77, 214, 104, 0.75)',
                    hoverBackgroundColor: 'rgba(77, 214, 104, 1)',
                    hoverBorderColor: 'rgba(77, 214, 104, 1)',
                    data: sup
                }
            ]
        };

        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata
        });
    },
    error: function(data) {
        console.log(data);
    }
});
});

to be sure that the second step work fine , I replaced $_POST(['id_espece']) with a default value and the PHP file return a JSON format not empty , so I think that the problem is in the first step , I don't know where is the problem exactly

you have a typo here:- `$user_id = isset($_POST["is_espece"])?$_POST["id_espece"]:"";` here it should be `$_POST["id_espece"]` instead of `$_POST["is_espece"]` — Alive to die - Anant, Jul 13 '17 at 18:02
get parameter cannot be reached by $_POST use $_REQUEST instead — Mohsen, Jul 13 '17 at 18:03
@JayBlanchard he is using ajax to send data and there it is:- `{id_espece:$('select.pam').val()},` so the post varibale will be `$_POST['id_espece']` not `is_espece` — Alive to die - Anant, Jul 13 '17 at 18:09
@AlivetoDie I was working with id-espece not is-espece i just edit my post — Issam, Jul 13 '17 at 18:10
[Have you watched the AJAX request / response in the browser's developer tools? Have you included the jQuery library in the project? Are there any errors reported? Are you running this on a web-server?](http://jayblanchard.net/basics_of_jquery_ajax.html) — Jay Blanchard, Jul 13 '17 at 18:11

Jay Blanchard · Answer 1 · 2017-07-13T18:23:58.943

In order to get a form element in the $_POST array it must have a name attribute. Change your select element to have a name:

<select class="pam" name="id_espece">

In addition $.post doesn't have a success function as you have written it. The format should be this:

$.post ('/charta.php',
    {id_espece:$('select.pam').val()},
    function(data){  
          console.log(data);
          window.location = "http://localhost/charta.php";
    });

Hugo sama · Answer 2 · 2017-07-13T18:27:16.590

0

Edited : Taken from here it seems you are sending a JSON format to the PHP so it can't parse it on $_POST, you need to get the complete body.

try this :

$data = json_decode(file_get_contents('php://input'), true);
print_r($data);

edited Jul 13 '17 at 18:27

answered Jul 13 '17 at 18:23

Hugo sama

899
1
9
19

Do or do not, there is no "try". A ***good answer*** will always have an explanation of what was done and why it was done in such a manner, not only for the OP but for future visitors to SO. – Jay Blanchard Jul 13 '17 at 18:24

Use Ajax to POST and GET in the same PHP file (JSON)

2 Answers2