Получение данных POST, которые сериализуются

Question

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

Раздел bargraph.html выглядит следующим образом:

<form method="POST" name="dataform" action="">
  <select id="data1" name="data1" id="data1-value">
    <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="PowerFactor">PowerFactor</option>
    <option value="SystemID">SystemID</option>
    </select>
    <select id ="data2" name="data2" id ="data2-value">
    <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="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){
    $.ajax({
        type: 'post',
        url: 'data.php',
        dataType: 'html',
        data: $('#dataform').serialize(),
        success:function(data){ 
            alert(data); 
        }, 
        error:function (xhr, ajaxOptions, thrownError){
            alert(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); // execute select query from database
$data = array(); 
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
    $row = preg_replace("/[^0-9]/", "", $row);
    $data[] = $row; //add results to data array
}
sqlsrv_free_stmt($result); //free result entry
sqlsrv_close($conn); // close connection
echo json_encode($data); //encode data to JSON

В моем bargraph.html у меня есть два раскрывающихся меню, я пытаюсь отправить две выбранные опции в мой файл data.php для выполнения запроса на выборку в моей базе данных.

Когда я запускаю свой код и, например, если я выбираю InletCurrent и InletVoltage из двух выпадающих меню и нажимаю «Отправить», он возвращает всплывающее окно браузера:

data.php файл по-прежнему эхо SystemID и ApparantPower.См. Здесь https://imgur.com/awKkuJv

Я хочу, чтобы параметры, выбранные в раскрывающемся списке, отправлялись в файл data.php и выполняли запрос на выборку с использованием двух параметров для моей базы данных.

Могу ли я получитьнемного помощи в этом, пожалуйста?Нужно ли отменять сериализацию данных в data.php?Если так, то как?Я не могу найти в Интернете пример, специфичный для моего макета кода

Структура таблицы MySQL: https://imgur.com/oUpDjSP

ОБНОВЛЕНИЕ: я теперь изменил свой bargraph.html на следующее:

$('#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();
    });

Приведенный выше код теперь печатает правильные данные, выбранные из выпадающих списков, в мой browser console, однако он не обновляет data.php при запуске.Он все еще показывает SystemID и ApparentPower, когда я запускаю data.php.

Answer 1

Я думаю, вам не хватает идентификатора в форме, dataForm .Вы выбираете форму, используя $ ('# dataForm'). Serialize () , но у вас нет идентификатора в форме.

https://api.jquery.com/id-selector/

<form method="POST" name="dataform" action="" id='dataForm'>
  <select id="data1" name="data1" id="data1-value">
    <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="PowerFactor">PowerFactor</option>
    <option value="SystemID">SystemID</option>
    </select>
    <select id ="data2" name="data2" id ="data2-value">
    <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="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){
    $.ajax({
        type: 'post',
        url: 'data.php',
        dataType: 'html',
        data: $('#dataform').serialize(),
        success:function(data){ 
           console.log('---Data submitted---');
           console.log($('#dataform').serialize());
           console.log('Returned Data: '+ data);
        }, 
        error:function (xhr, ajaxOptions, thrownError){
            console.log('Error:' + thrownError);

        }, 
        complete: function(){
        }
    });
    e.preventDefault();
});

</script>

Answer 2

Попробуйте указать идентификатор для формы.

<form method="POST" id="dataform" name="dataform" action="">
</form>

Вы использовали "$ ('# dataform'). Serialize ()" в вызове ajax, но не присвоили идентификатор для формы.

Answer 3

Вместо сериализации вы можете просто передать значение следующим образом

$('#submitButton').click(function(e){



      var data1=$("#data1").val();//getting value of dropdown 1
      var data2=$("#data2").val();//getting value of dropdown2

        $.ajax({
            type: 'post',
            url: 'data.php',
            dataType: 'html',
            data: {data1:data1,data2:data2},//passing values
            success:function(data){ 
                alert(data); 
            }, 
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError);
            }, 
            complete: function(){
            }
        });
        e.preventDefault();
    });