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并点击Submit，它将返回一个弹出式浏览器：

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

代替序列化，您可以像这样传递值

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

Answer 2

我认为您缺少表单 dataForm 上的ID。您正在使用 $（'＃dataForm'）。serialize（）选择表单，但是表单上没有ID。

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 3

尝试提供ID给表单。

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

您在ajax调用中使用了“ $（'＃dataform'）。serialize（）”，但没有为表单分配ID。

获取序列化的POST数据

3 个答案: