Question

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

问题是，我得到“Uncaught TypeError：无法读取未定义的属性'长度'，但是当我手动输入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元素得到了这个：

注意： /Applications/XAMPP/xamppfiles/htdocs/myProject/data.php中的未定义索引：startDate
注意：未定义的索引：/Applications/XAMPP/xamppfiles/htdocs/myProject/data.php中的endDate []

Answer 1

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

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

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

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

的访问权限

编辑：因为我意识到我基本上重复了Lars Kotthoff所说的here is an interesting solution使用POST代替GET，使用xhr.send(method[, data][, callback])

Answer 2

谢谢@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});

D3在回调期间为用户定义的输入获取NULL

2 个答案: