Файл PHP не обновляется после выбора из выпадающего списка

Question

У меня есть два отдельных файла, bargraph.html и data.php.

Часть гистограммы:

<form method="POST" name="dataform" action="" id='dataForm'>
  <select id="data1" name="data1">
    <option value=""></option>
    <option value="DateRecorded">DateRecorded</option>
    <option value="InletVoltage">InletVoltage</option>
    <option value="InletCurrent">InletCurrent</option>
    <option value="ActivePower">ActivePower</option>
    <option value="ApparentPower">ApparentPower</option>
    <option value="PowerFactor">PowerFactor</option>
    <option value="SystemID">SystemID</option>
    </select>
    <select id ="data2" name="data2">
    <option value=""></option>
    <option value="DateRecorded">DateRecorded</option>
    <option value="InletVoltage">InletVoltage</option>
    <option value="InletCurrent">InletCurrent</option>
    <option value="ActivePower">ActivePower</option>
    <option value="ApparentPower">ApparentPower</option>
    <option value="PowerFactor">PowerFactor</option>
    <option value="SystemID">SystemID</option>
  </select>
  <button type="button" id="submitButton" name="submitButton">Submit</button>
</form>

<script type="text/javascript">

$('#submitButton').click(function(e) {
      var data1 = $("#data1").val();
      var data2 = $("#data2").val();

        $.ajax({
            type: 'post',
            url: 'data.php',
            dataType: 'html',
            data: {data1:data1,data2:data2},
            success: function(data){ 
                console.log(data);
                console.log('#dataForm');
            }, 
            error: function (xhr, ajaxOptions, thrownError){
                console.log(thrownError);
            }, 
            complete: function(){
            }
        });
        e.preventDefault();
    });

</script>

Часть data.php:

if (isset($_POST['data1'])) { 
    $opp1 = $_POST['data1']; 
} else { 
    $opp1 = 'SystemID'; 
}
if (isset($_POST['data2'])) { 
    $opp2 = $_POST['data2']; 
} else { 
    $opp2 = 'ApparentPower'; 
}

$sql = "SELECT $opp1, $opp2 FROM RaritanMachineDataa"; 
$result = sqlsrv_query($conn, $sql); 
$data = array(); 
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    $row = preg_replace("/[^0-9]/", "", $row);
    $data[] = $row; 
}
sqlsrv_free_stmt($result); 
sqlsrv_close($conn); 
echo json_encode($data); 
?>

Когда я выбираю из двух раскрывающихся меню, в моем browser console он печатает выбранные данные в формате JSON и значения из моей базы данных, однако, когда я загружаю файл data.php через browser URL, он печатает SystemID и ApparentPower, а не выбранные данные.Почему это?Может кто-нибудь помочь мне, пожалуйста?

См. Ниже скриншот консоли браузера, печатающей выбранные данные из выпадающих списков.https://imgur.com/rdxgWaB

и снимок экрана data.php, загруженного через браузер после выбора из выпадающих списков InletCurrent и ActivePower.https://imgur.com/a/eiDeTLs

Answer 1

Проблема в dataType: 'html' Вы публикуете данные json, но определяете html Попробуйте изменить на json:

         $.ajax({
            type: 'post',
            url: 'data.php',
            dataType: 'json',
            data: {data1:data1,data2:data2},
            success: function(data){ 
                console.log(data);
                console.log('#dataForm');
            }, 
            error: function (xhr, ajaxOptions, thrownError){
                console.log(thrownError);
            }, 
            complete: function(){
            }
        });