D3 получает NULL для пользовательского ввода во время обратного вызова
У меня есть два поля ввода с именем startDate и endDate и кнопка отправки. Я сделал бэкэнд кода в PHP, чтобы он брал входные данные (даты) из двух текстовых полей и, после нажатия кнопки отправки, выводил файл JSON, который может отображать D3.
Проблема в том, что я получаю «Uncaught TypeError: Невозможно прочитать свойство ‘length’ из undefined», но когда я ввожу значения startDate и endDate вручную (объявляя значение вместо того, чтобы оно было введено пользователем), оно работает отлично. Я предполагаю, что значения sDate и eDate не передаются должным образом во время обратного вызова, поэтому он возвращает NULL. Я понятия не имею, как это исправить, хотя.
Поделиться своим кодом здесь.
HTML:
<body>
<form id="user" action="#" method="post">
<table>
<tr>
<td>Start Date:</td>
<td><input id="start_date" type="text" name="startDate" value="" size="30" /> </td>
</tr>
<tr>
<td>End Date:</td>
<td> <input id="end_date" type="text" name="endDate" value="" size="30" /></td>
</tr>
</table>
<div id="submit_button">
<input type="reset" value="Clear" />
<input id="submitButton" type="submit" value="Submit" />
</div>
</form>
<div id="contents" style="width:500px; height:500px;"></div>
<!-- data should appear once Submit button is clicked -->
<script>
$(document).ready(function(){
$('#submitButton').click (function(e){
e.preventDefault();
renderTable();
});
});
</script>
<!-- D3 -->
<script>
function renderTable(){
d3.json("data.php", function(error, data) {
var c_data = d3.select("#contents").append("svg")
.attr("width", 500)
.attr("height", 500)
var bars = c_data.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d){return d.value * 30})
.attr("height", 50)
.attr("y", function(d, i){return i * 80})
})
}
</script>
</body>
PHP:
<?php
$db = new PDO($hostname, $username,$password);
//$startDate = '2014-11-21'; --> works when this is used
//$endDate = '2014-11-23'; --> works when this is used
if(isset($_POST['startDate']))
{ $startDate = $_POST['startDate'];};
if(isset($_POST['endDate']))
{ $endDate = $_POST['endDate'];};
$statement = $db->prepare(*SQL statement edited out*);
$statement->execute(array($startDate, $endDate));
$jsonData=$statement->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($jsonData);
?>
Дополнительная информация:
Я получаю это для элемента data.php:
уведомление: Неопределенный индекс: startDate in /Applications/XAMPP/xamppfiles/htdocs/myProject/data.php
уведомление: Неопределенный индекс: endDate в /Applications/XAMPP/xamppfiles/htdocs/myProject/data.php
[]
Решение
Формы работают, отправляя входные значения на сервер с помощью POST или GET. (Отсюда их атрибут метода).
Вы пытаетесь получить доступ к переменной POST в вашем php-коде, вы на самом деле не размещаете форму. Возможно, было бы проще поместить переменные в URL, что-то вроде этого:
d3.json("data.php?startDate=" + startDateValue + "&endDate=" + endDateValue, funct.....
Среди множества различий между POST и GET есть то, что GET отправляет значения через URL, поэтому единственное отличие в коде php — это изменение доступа к $startDate = $_GET['startDate'];
Изменить: так как я понимаю, я просто в основном повторил именно то, что сказал Ларс Коттофф, вот интересное решение для использования POST вместо GET, используя xhr.send(method[, data][, callback])
Другие решения
Спасибо, @LarsKotthoff и @IgnacioAmpuero! Я не совсем использовал предложенный вами метод, но он помог мне понять, чего мне не хватало.
Для тех, кто испытывает ту же проблему, вот что я сделал:
Использовал AJAX-запрос для заполнения моего запроса.
var jsonData = $.ajax({
type: 'POST',
url: 'data.php',
dataType: 'json',
data: $('#user').serialize(),
async: false
}).responseText;
Присвоил результат данным.
var data = JSON.parse(jsonData_status);
А затем использовал его для генерации моего графика.
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500);
var bars = canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function(d){return d.value * 30})
.attr("height", 50)
.attr("y", function(d, i){return i * 80});