D3 在回调期间获取用户定义输入的 NULL - D3 getting NULL for user-defined input during callback

我有两个名为startDate和endDate的输入文本框，以及一个提交按钮。我在 PHP 中完成了代码的后端，以便它从两个文本框中获取输入（日期），并在单击提交按钮后输出 D3 可以呈现的 JSON 文件。

问题是，我得到"未捕获的类型错误：无法读取未定义的属性'长度'"，但是当我手动输入 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);
?>

附加信息：

我得到这个是为了数据.php元素：

注意：未定义的索引：/Applications/XAMPP/xamppfiles/htdocs/myProject/data中的startDate.php注意：未定义的索引：结束日期在/Applications/XAMPP/xamppfiles/htdocs/myProject/data.php[]

表单

的工作原理是通过 POST 或 GET 将输入值发送到服务器。（因此他们的方法属性）。

您正在尝试访问 php 代码中的 POST 变量，但实际上并没有发布表单。将变量放在 url 中可能更容易，如下所示：

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

POST 和 GET 之间的众多区别之一是 GET 通过 url 发送值，因此 php 代码的唯一区别是更改对 $startDate = $_GET['startDate']; 的访问

编辑：由于我意识到我基本上重复了Lars Kotthoff所说的内容，因此这是一个使用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});