Unknown problem with (probably) POST method

This task is quite simple but I just can’t seem to get it to work. What the outcome should be is explained in the picture below. I guess that there is some kind of a problem with POST in php, but I’m not sure. Do you see what’s the problem that’s causing this not to work?

Problem: No results are shown when there should be.

<?php
$conn = mysqli_connect("localhost", "root", "", "podaci");
 
if($conn === false){
    die("Konekcija nije uspešna. " . mysqli_connect_error());
}

$number = $_POST['number']; 
$result_array = array();

/* SQL query to get results from database */
$sql = "SELECT brojKartice, imeVlasnika, prezimeVlasnika, adresaVlasnika, 
ostvareniBodovi, ostvareniPopust FROM podatak WHERE brojKartice = '".$number."' "; 

$result = $conn->query($sql);

/* If there are results from database push to result array */
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        array_push($result_array, $row);
    }
}
/* send a JSON encded array to client */
echo json_encode($result_array);

$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <meta charset="UTF-8">
</head>
<body>
  <div class = "container" > 
       <strong>Unesite broj kartice: </strong><input id="number" name="number" required/>
    <input type="button" id="getusers" value="Provera"/> <br><br>
    <div id="records"></div>  
    </div> 

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript"> 

$(function() {
    $('#getusers').click(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'provera.php',
            data: {
                number: $('#number').val()
            }
        });
    });
});

    $(function(){ 
      $("#getusers").on('click', function(){ 
      $.ajax({ 
        method: "GET",   
        url: "provera.php",
      }).done(function( data ) { 
        var result= $.parseJSON(data); 

          var string='<table width="100%"><tr><th>#</th><th>Korisnik</th><th>Adresa</th><th>Bodovi</th><th>Popust</th><tr>';
 
 /* from result create a string of data and append to the div */
  $.each( result, function( key, value ) { 
    string += "<tr> <td>"+value['brojKartice'] + "</td><td>"+value['imeVlasnika']+' '+value['prezimeVlasnika']
      + "</td><td>"+value['adresaVlasnika']+ "</td><td>"+value['ostvareniBodovi']+ "</td><td>"
        +value['ostvareniPopust']+"</td> </tr>"; 
        }); 
       string += '</table>'; 
    $("#records").html(string);
       }); 
    }); 
});

</script> 
</body>
</html>

CREATE DATABASE podaci;

CREATE TABLE podatak (
brojKartice VARCHAR(10) NOT NULL,
imeVlasnika VARCHAR(20) NOT NULL,
prezimeVlasnika VARCHAR(30) NOT NULL,
adresaVlasnika VARCHAR(50),
ostvareniBodovi VARCHAR(10) NOT NULL,
ostvareniPopust VARCHAR(10) NOT NULL,
rokVazenja DATE NOT NULL
);

INSERT INTO podatak VALUES
('0123456','Đorđe','Anđelković',NULL,'15','150','2021-1-9'),
('6543210','Snežana','Bojović',NULL,'20','200','2021-5-3'),
('9876543','Goran','Stojadinović',NULL,'10','100','2021-9-7'),
('3456789','Bojana','Marković',NULL,'25','250','2021-12-15');

Answer

Welcome. Here are a few pointers to help you identify the source of the issue:

Is your browser making the HTTP requests that you expect? By glancing at your Javascript, you expect both a POST and a GET. If you are using Google Chrome, check Dev tools – Network
What HTTP requests is the server receiving? You can debug your PHP code by following the official debugging documentation and reading its comments. Especially:

<?php print_r($_POST); ?>

Is the server answering the data you are expecting? Check the HTTP verb (GET or POST) used to get the number (hint: line 8 of your code). Now check on which HTTP call (GET or POST) you put the Javascript callback to handle the server response.

Answer: your PHP code reads the number from the POST request, but your Javascript code only supports responses from the GET request.

Simplify your Javascript by moving the callback (the function block passed as argument of the .done() method) from the GET request to the POST request. Then delete the Javascript code dealing with the GET request.

Alternatively, replace $_POST with $_GET and remove the POST call.

Advertisement

Answer