在 AJAX 中使用 GET 方法答案

【问题标题】：Using GET Method with AJAX在 AJAX 中使用 GET 方法
【发布时间】：2015-03-12 16:30:50
【问题描述】：

我有一个 PHP 表单，其中有一个名为“Traveling from:”的字段。此字段是一个下拉框，有 4 个选项（路线）可供选择。

该字段的HTML如下；

<form id="bookingform" action="http://www.example.com/wp-content/themes/theme1/ajax-getvalues.php" method="get"> 
    <p>
        <b>Travelling from:</b><br>
        <select name="from" id="from" style="-webkit-appearance: menulist-button; width: 300px; position: absolute; height: 30px; font-size: 13px; padding: 5px;">
            <option value="">Select a Route...</option>
            <?php
            while ($row= mysqli_fetch_array($route)) {
                echo "<option value='". $row['Route'] ."'>" . 
                          $row['Route'] . 
                     "</option>";
            }
            ?>
        </select>
    </p><br><br>
</form>

在这个文件的头部分，我有以下代码，它监听选择列表的变化并进行 AJAX 调用；

 <script type="text/javascript">
 $(document).ready(function($) {
     var route_id = 'from'; //Route ID
     $('#'+route_id).change(function(e) {
         //Grab the chosen value on route change
         var selectroute = $(this).val();
         $.ajax({
             url: 'http://www.example.com/wp-content/themes/theme1/ajax-getvalues.php?from='+ encodeURIComponent(selectroute),
             success: function(data) {
                 alert(data);
             },
             error: function (xhr, ajaxOptions, thrownError) {
                 alert(xhr.status + " "+ thrownError);
             }
         });
     });
 });
 </script>

上述代码中的警报按预期显示下拉框中的选定值 - 这增加了我的困惑。

最后，PHP 文件 (ajax-getvalues.php) 具有以下代码来接收值；

然而 $selectroute 似乎是空的。

我在PHP文件中使用以下代码测试$select路由是否为空；

<?php
$connection = mysqli_connect("localhost", "user", "password", "dbname");

$selectroute = mysqli_real_escape_string($connection, $_GET['from']);
if  ($selectroute != "") {
    $result = mysqli_query($connection, "SELECT DATE_FORMAT(SailingTime,'%h:%i %p') AS FormattedTime FROM wp_timetable WHERE Route_ID = 1 AND '$selectvalue' BETWEEN StartDate AND EndDate");
}
echo '<option value="">Please select a time...</option>';

while($row = mysqli_fetch_array($result))
{
    echo '<option value="'.$row['FormattedTime'].'">' . $row['FormattedTime'] . "</option>";
    echo $row['FormattedTime'] ."<br/>";
}

mysqli_free_result($result);
mysqli_close($connection);

基本上，如果$selectroute 不为空，则结果会在表单的另一个下拉列表中生成。但是没有产生结果 - 因此$selectroute 是空的。

【问题讨论】：

为什么要完全限定 AJAX 路径？这是从不同的域调用的吗？
你怎么知道$selectroute是空的？你做了什么来检查它。您是否检查过$_GET['from'] 是否已设置？您是否在浏览器开发人员工具中查看过请求并检查它是否在 URL 中设置？在您发送请求之前，您是否检查过 JS 中的 selectroute 设置是否正确？
如果您想使用 GET 参数调用，请使用 $.get 而不是 $.ajax。
@prava — 为什么？ $.get 只是 $.ajax 的包装

标签： php html ajax get

【解决方案1】：

问题在于您的成功回调函数selectroute 中的两个部分只是您的表单元素的值。

var url = 'http://www.example.com/wp-content/themes/theme1/ajax-getvalues.php';
$.ajax({
    url: url + '?from=' + encodeURIComponent(selectroute),
    success: function(data) {
        alert(data);
        // I think you want to append the ajax response to the form.
        $('#bookingform').append($(data));
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.status + " "+ thrownError);
    }
});

此外，在您的 PHP 脚本中，您不会使用 $selectroute 做任何事情，并且有一个未初始化的变量 $selectvalue

<?php
$connection = mysqli_connect("localhost", "user", "password", "dbname");

$selectroute = mysqli_real_escape_string($connection, $_GET['from']);

// initialize $selectvalue to today date
$selectvalue = '2015-03-12';

$query = "SELECT DATE_FORMAT(SailingTime,'%h:%i %p') AS FormattedTime
          FROM wp_timetable
          WHERE Route_ID = 1 
          AND '$selectvalue' BETWEEN StartDate AND EndDate";

if  ($selectroute != "") {
    $result = mysqli_query($connection, $query);

    if ($result) {
        echo '<select>';
        echo '<option value="">Please select a time...</option>';

        while($row = mysqli_fetch_array($result)) {
            echo '<option value="'.$row['FormattedTime'].'">' .
                      $row['FormattedTime'] . 
                 '</option>';
        }
        echo '</select>';
        mysqli_free_result($result);
    }
}

mysqli_close($connection); 

?>

【讨论】：