Problem to recover variable passed by ajax to php - php

Question

I have a "POST" ajax call to getSegnalazioniMappa.php.
When I try to recover the passed variable I have notice: undefined variable.
JavaScript code:
$(document).ready(function(){
$('#gravita').change(function(){
var index = document.getElementById("gravita").value;
$.ajax({
method: "POST",
data:{index:index},
url: "getSegnalazioniMappa.php",
processData: false,
success: function(data){
console.log(data);
},
error: function(e) {
alert(e.responseText);
},
dataType: "JSON"//set to JSON
});
});
});
This is getSegnalazioniMappa.php
<?php
require('../../../setup/database_connection.php');
if(isset($_POST['index'])){ //this one is always false
$index = $_POST['index'];
}
?>
HTML
<select name="gravita" onchange="updateTable(this.value)" style="width: 130px;" class="form-control" id="gravita" required>
<option value="all" selected>Tutto</option>
<option value="bassa">Bassa</option>
<option value="media">Media</option>
<option value="alta">Alta</option>
</select>

Answer 1

You got undefined in error because you did not get any response from the server. you can see in console.
also where is onchange="updateTable(this.value)" defined ???
$(document).ready(function(){
$('#gravita').change(function(){
var index = $(this).val();
$.ajax({
method: "POST",
data:{index:index},
dataType: "JSON",
url: "getSegnalazioniMappa.php",
processData: false,
success: function(data){
console.log(data);
},
error: function(xhr,textStatus,err) {
console.log("readyState: " + xhr.readyState);
console.log("responseText: "+ xhr.responseText);
console.log("status: " + xhr.status);
console.log("text status: " + textStatus);
console.log("error: " + err);
},
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="gravita" style="width: 130px;" class="form-control" id="gravita" required>
<option value="all" selected>Tutto</option>
<option value="bassa">Bassa</option>
<option value="media">Media</option>
<option value="alta">Alta</option>
</select>

Answer 2

Your PHP code should be like this:-
<?php
if(isset($_POST['index'])){
echo $index = $_POST['index'];
}
?>
ajax request should be :-
<script type="text/javascript">
$(document).ready(function(){
$('#gravita').change(function(){
var index = document.getElementById("gravita").value;
$.ajax({
method: "POST",
data:{index:index},
url: "getSegnalazioniMappa.php",
processData: true,
success: function(data){
alert(data);
console.log(data);
},
error: function(e) {
alert(e.responseText);
},
dataType: "JSON"//set to JSON
});
});
});
</script>
processData should be true.