从下拉列表中选择数据时,从 MYSQL 数据库中设置输入字段值属性

Posted

技术标签:

【中文标题】从下拉列表中选择数据时,从 MYSQL 数据库中设置输入字段值属性【英文标题】:Set input fields value attribute from MYSQL database when selecting data from dropdown list 【发布时间】:2014-03-11 14:00:15 【问题描述】:

我正在尝试发送选择查询并将结果设置为不同输入字段的值属性,查询应在从下拉列表中选择值时发送。在做了一些研究后,我发现这可以通过 jQuery 来实现。

jQuery 会将请求发送到包含我的查询和获取结果的 php 文件,然后以 json 格式返回值。此时一切正常,我的 php 文件正在运行并返回有效的 json 数据,但我无法将这些数据附加到我拥有的输入字段中。这是我的脚本,它应该运行 php 文件并以 json 格式返回结果,然后将结果附加到文本字段中。

Check my code on fiddle

<script>
    var flight_destination = $('#destination).text();
    var flight_departure = $('#departure).text();
    var flight_arrival = $('#arrival).text();

    $('#flight_number').on('change', function() 

        var flight_info = $('#flight_number :selected').text();
        $.ajax(
            url: "getFlightData.php",
            type: "get",
            data: '?flight_number=$flight_number',
            success: function(data) 
                var flight_destination = data[1];
                var flight_departure = data[2];
                var flight_arrival = data[3];   
            
        

        $('#destination').val(flight_destination);
        $('#departure').val(flight_departure);
        $('#arrival').val(flight_arrival);

    )
</script>

getFlightData.php

<?php
    include "dbConnect.php";
    $flight_number = $_GET['flight_number'];
    $query = mysql_query("SELECT * FROM flights WHERE flight_number='$flight_number'"); 
    $data = array();
    while($row = mysql_fetch_array($query)) 
    
        $row_data = array(
            'flight_number' => $row['flight_number'], 
            'destination' => $row['destination'],
            'departure' => $row['departure'],
            'arrival' => $row['arrival']
        );
        array_push($data, $row_data);
    
    echo json_encode($data);
?>

好消息 我的一个朋友帮我解决了 data: 行中的语法错误。我确实将它从 data:'flight_number='+$('#flight_number').val(), 更改为 data:'flight_number':$('#flight_number').val(),

在浏览器控制台窗口中,json 对象在更改下拉列表值时完美返回,但仍无法将这些对象作为值属性附加到输入字段


更新 2

现在我有this 仍然完美地在浏览器的控制台窗口中返回了数据,但是第一个文本字段中唯一附加的是 [object] 从下拉列表中选择选项后浏览器的


更新 3 在@satyrwilder 的大力帮助和努力下,我现在能够检索第一个文本字段值。这是脚本 sn-p 的工作版本

$(function()
    var flight_destination = $('#destination');
    var flight_departure = $('#departure');
    var flight_arrival = $('#arrival');
    var flight_number = $('#flight_number');

    $('#flight_number').on('change', function() 
       var flight_info = $('#flight_number :selected').text();
    $.ajax(
        url: "getFlightData.php",
        type: "get",
        dataType: "json",
        data:  'flight_number' : flight_number.val() 
        )
    .done(function(data) 
        $("#destination").val(data[0].destination);
        $("#departure").text(data[0].departure).val(data[0].departure);
        $("#arrival").text(data[0].arrival).val(data[0].arrival);

    );
    );
);   

我现在也期待附加 datetime-local 值。我会定期更新这个问题,直到 100% 强制完成

【问题讨论】:

data: '?flight_number=$flight_number', 更改为 data:'flight_number='+$('#flight_number').val(), 感谢您的回复,非常感谢。其实也行不通。只是为了澄清 1- 我有 1 个文本字段和 2 个日期时间本地字段。 2- getFlightData.php?flight_number=15463 像这样返回航班信息:- ["flight_number":"15463","destination":"Zurich","departure":"2014-02-21 04:37:00","arrival":"2014-02-28 07:17:00"] 好的,我可能误解了你的问题,抱歉。我现在知道了。 success 回调应该是这样的:success: function(data) flight_destination.val(data[1]); ... 我做了,但它仍然没有返回任何东西,我也做了@JorhelReyes 在他的回答中提到的事情,但仍然没有运气 您确定data 会返回到客户端并填充有json 字符串并对其进行解析吗?如果您不确定,success: function(data) console.log(data); ... 【参考方案1】:

您必须声明接收查询的数据类型。

dataType: "json"

$.ajax(
        url: "getFlightData.php",
        type: "get",
        data: '?flight_number=$flight_number',
        success: function(data) ... ,
        dataType: "json", //<--------- this 
);

Documentation of $.ajax()


在你的代码 php 开头来自 json 的标头

对于 JSON:

header('Content-Type: application/json');

对于 JSON-P:

header('Content-Type: application/javascript');

【讨论】:

感谢您的回答,但输入字段中仍然没有返回任何内容。我只是把我的脚本放在小提琴上jsfiddle.net/UeRRv data 属性必须是一个对象。即 flight_number: $flight_number 和 jquery 负责其余的工作 更正:var 数据是对象,而不是字符串,@peter 你的答案是正确的。【参考方案2】:

最后我来到了最终的工作代码,一切都运行良好。首先,我要感谢 @satyrwilder 纠正我的 javascript 部分。

这是最终代码,它使用 jquery + php 将数据库中的值附加到 text 和 datatime-local 字段中

getFlightDate.php

<?php
header('Content-Type: application/json');
include "dbConnect.php";
function datetime()

    return date( 'Y-m-d\TH:i:s', time());



$flight_number = $_GET['flight_number'];
$query = mysql_query("SELECT * FROM flights WHERE flight_number='$flight_number'"); 
$data = array();
while($row = mysql_fetch_array($query)) 

$row_data = array(
    'flight_number' => $row['flight_number'], 
    'destination' => $row['destination'],
    'departure' => datetime($row['departure']),
    'arrival' => datetime($row['arrival'])
   );
  array_push($data, $row_data);


echo json_encode($data);
?>

print.php

<?php
include "dbConnect.php";
$flight_numbers = mysql_query("SELECT flight_number FROM flights"); 
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Test</title>
</head>
<body>
<select id="flight_number">
<?php while($row = mysql_fetch_array($flight_numbers)) 

Print "<option>".$row['flight_number'] . "</option> ";
 
?>
</select>
<br>
<input type="text" id="destination">
<input type="datetime-local" id="departure" />
<input type="datetime-local" id="arrival" />
<script>
$(function()
    var flight_destination = $('#destination');
    var flight_departure = $('#departure');
    var flight_arrival = $('#arrival');
    var flight_number = $('#flight_number');

    $('#flight_number').on('change', function() 
       var flight_info = $('#flight_number :selected').text();
    $.ajax(
        url: "getFlightData.php",
        type: "get",
        dataType: "json",
        data:  'flight_number' : flight_number.val() 
        )
    .done(function(data) 

        $("#destination").val(data[0].destination);
        $("#departure").text(data[0].departure).val(data[0].departure);
        $("#arrival").text(data[0].arrival).val(data[0].arrival);

    );
    );
);
</script>
</body>
</html>

诀窍是在 json_encode 之前更改日期时间格式,因为 datetime-local 输入字段以特定格式显示值,即2014-12-05T08:30:59 -> Y-m-d\TH:i:s

【讨论】:

以上是关于从下拉列表中选择数据时,从 MYSQL 数据库中设置输入字段值属性的主要内容,如果未能解决你的问题,请参考以下文章

从MySQL加载数据并使用jQuery Mobile,PHP选择填充下拉列表

如何从 mysql DB 中搜索与 mojolicious perl 中选定的下拉列表相关的内容

Excel中设置下拉列表的来源怎么选择其他工作表的内容

如何从下拉列表中选择多个项目并将多个值插入 MYSQL

从文本框的下拉列表中选择选项

基于多个下拉选择从mysql数据库中获取数据