Установить атрибут значения полей ввода из базы данных MYSQL при выборе данных из выпадающего списка

Question

Я пытаюсь отправить запрос выбора и установить результат как атрибут значения для разных полей ввода, запрос должен быть отправлен при выборе значения из раскрывающегося списка. После некоторых исследований я обнаружил, что это можно достичь через 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:'flight_number='+$('#flight_number').val(), до data:{'flight_number':$('#flight_number').val()},

В окне браузера консольного объекты JSON возвращаемые совершенно на изменение выпадающего значения списка, но по-прежнему не может добавить эти объекты в соответствующие поля ввода в качестве значения атрибута

---

Update 2

Теперь у меня есть this Тем не менее данные, возвращаемые в консольном окне браузера прекрасно, но только то, что добавляется в первом текстовом поле [объект] браузера после выбора опции из выпадающего списка

---

Update 3 С большой помощью и усилиями @satyrwilder я теперь в состоянии получить первое значение текстового поля. Это рабочая версия сценария фрагмент

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

    }); 
    }); 
}); 

Я теперь с нетерпением жду, чтобы добавить к даты-времени локального значения, а также. Я буду регулярно обновлять этот вопрос до тех пор, пока он не будет на 100% не вызван

Answer 1

Вы должны объявить, какие данные будут отправлены на ваш запрос.

dataType: "json"

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

Documentation of $.ajax()

---

И заголовок из JSON в начале вам код PHP

Для JSON:

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

Для JSON-P:

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

Answer 2

Наконец я пришел к окончательному рабочему коду, где все работает отлично. Сначала я хотел бы поблагодарить @satyrwilder за исправление моей части javascript.

Вот окончательный код, который присоединяет значения из базы данных в текстовые и datatime локального полей с помощью JQuery + PHP

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 , так как поля ввода-времени-локального ввода показывают значения в определенном формате, который равен 2014-12-05T08:30:59 ->Y-m-d\TH:i:s