D3 получение NULL для пользовательского ввода во время обратного вызова

У меня есть два входных текстовых поля с именем startDate и endDate и кнопка отправки. Я сделал бэкэнд кода на PHP, так что он берет ввод (даты) из двух текстовых полей и после нажатия кнопки отправки выводит файл JSON, который может отображать D3.D3 получение NULL для пользовательского ввода во время обратного вызова

Проблема заключается в том, что я получаю сообщение «Uncaught TypeError: Can not read property» length of 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 элемента:

Уведомление: Undefined индекс : startDate в /Приложения/XAMPP/xamppfiles/HTDOCS/MyProject/data.php
Примечание: Не определен индекс: EndDate в /Applications/XAMPP/xamppfiles/htdocs/myProject/data.php []

источник

2014-11-25 rock3teer

Ну, вы не являетесь 'POST'ing формой, поэтому данные не будут отправлены. Вы можете добавить значения к URL-адресу, который вы вызываете как параметры, и запросить их через '$ _GET'. –

Привет, @LarsKotthoff! Я не уверен, что понимаю, что вы имеете в виду. Не могли бы вы привести более конкретный пример? Я лучше всего узнаю, когда вижу код. Спасибо! – rock3teer

Что-то вроде 'd3.json (" data.php? StartDate = "+ startDate +" & endDate = "+ endDate, function (...) {...})'. –

Формы работы путем отправки входных значений к сервера с помощью POST или GET. (Отсюда их атрибут метода).

Вы пытаетесь получить доступ к переменной POST в своем php-коде, вы фактически не используете POST-форму. Это может быть проще поместить переменные в URL, что-то вроде этого:

d3.json("data.php?startDate=" + startDateValue + "&endDate=" + endDateValue, funct.....

Среди многих различий между POST и GET является то, что GET отправляет значения по URL, так что единственное различие в коде PHP будет быть изменение доступа к $startDate = $_GET['startDate'];

Edit: Так как я понимаю, только в основном повторил то, что сказал Ларс Kotthoff, here is an interesting solution для использования POST вместо GET, используя xhr.send(method[, data][, callback])

источник

2014-11-25 21:40:34 iampueroo

Спасибо, @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});

источник

2014-11-25 23:40:41 rock3teer

D3 получение NULL для пользовательского ввода во время обратного вызова

ответ

Смежные вопросы