Unknown problem with (probably) POST method

Question

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 1

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.

Answer 2

First of all, you have two event handler for #getusers button. This doesn't make sense in the first place. Whenever you assign multiple event handler on a html element only the last one will trigger. In this case, it's only the ajax call with the GET method. And on your server side (php), this variable $number = $_POST['number']; will not have a value because the method was GET .

So to solve this you have two options I can think of:

#1. Move the first ajax call that you have where you have the POST request and then place it where you have the ajax call with GET method. In short, replace GET with POST event.

#2. Change your php code to use $_GET and update your ajax call for GET to adhere with the PHP change.

You can remove either of the event handler of your button and just bind only one.

Here is for a quick reference on javascript event handler and addEventListeners:https://gist.github.com/belmer/5e433aabbab24086af5c12ce0fb7323c

Best regards,

Unknown problem with (probably) POST method

Question

2 answers

solution1
0 ACCPTED 2021-03-23 23:02:14

solution2
-1 2021-03-23 23:10:33

Unknown problem with (probably) POST method

Question

2 answers

solution1 0 ACCPTED 2021-03-23 23:02:14

solution2 -1 2021-03-23 23:10:33

solution1
0 ACCPTED 2021-03-23 23:02:14

solution2
-1 2021-03-23 23:10:33