将变量从php传递到ajax，然后传递到SQL查询

Question

我试图将datepicker变量传递给onclick ajax函数，然后将其传递给另一个ajax方法，该方法将变量传递给SQL查询，然后将查询传递回ajax以生成图表。 但是我收到了Uncaught TypeError：无法在jquery ui上读取未定义的属性“ target”。

的HTML

 <div class="sorting">

    <h4 class="d-inline">Start Date</h4>
    <input type = "text" id="start" />
    <h4   class="d-inline">End Date</h4>
    <input type = "text" id="end"/>
    <button type ="button" onclick="onClick()" class="btn btn-primary">Submit</button>
    <div class="filters float-right d-inline">
        <h5 class="d-inline">TRIBES &nbsp;</h5>
        <select class="dropdown" name="date-filter" id="date-filter" onchange="updateBarChart()">
            <option>Early Morning</option>
            <option>Wh</option>
            <option>Tribe 3</option>
            <option>Tribe 4</option>
        </select>
    </div>
</div>

阿贾克斯

var myLineChart;
    $( document ).ready(function() {
        $(function() {
            $("#start").datepicker();
        });

        $(function() {
            $("#end").datepicker();
        });


    });



     function onClick() {
         var start = $("#start");
         var end = $("#end");
         ajaxLineRequest(start,end);
     }


         $('#loadingbar').show();
        $.ajax({
        type: 'POST',

        url: 'ajax/tribe_data.php',
        data: {start:start,end:end},
        dataType: 'json',

        success: function (data) {

            console.log(data[0]);

            data = {
                    datasets: [{
                        data: data[0].datasets,
                        borderColor: ['rgba(255,99,132,1)'],
                        fill:false,
                        backgroundColor: [
                            'rgba(255,99,132,1)'

                    ]


                }],
                labels: data[0].labels

                };  
                    myLineChart = new Chart(document.getElementById("tribe"), {
                    type: 'line',
                    data: data,
                    options: {

                        legend: {
                            display: false
                        },
                        scales:{
                            yAxes:[{
                                ticks:{
                                    autoSkip: false
                                }
                            }]
                        }
                    }
                });


        },
      complete: function(){
            $('#loadingbar').hide();
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
}                   

Answer 1

对于我来说，很难知道在脚本执行的哪一点将命名函数“ onClick”附加为事件处理程序，但是我指出了一些可以改进代码的地方。

将名称属性添加到输入元素，例如

<input type = "text" id="start" name="start"/>

然后通过以下方式引用表单输入的值 ：

var start = $("#start").val();

您当前的代码将jQuery元素本身作为AJAX请求的数据项发送，而不是作为输入值发送。