php - 使用 Jquery 和 Ajax 更新表

Question

我有一个相当大的页面，其中包含很多内容，其中一部分是价格与日期的表格。通常该表如下所示:

“上一个”和“下一个”链接以及日期选择器使用户能够在表中显示不同的日期范围。然而，使用简单的 html 表单和 php/mysql，整个页面每次都会刷新，看起来非常困惑。我想使用 jQuery 和 Ajax 来刷新表格。

为此，我使用 PHP include() 将表放入单独的文件中。名为 calendar_inner.php 的单独文件使用名为 $startdate 的变量来执行必要的 mysql 查询以获取表的所有数据。现在我只需要了解如何为包含的文件提供新的 $startdate 值，然后刷新该文件。这就是我在黑暗中摸索 jQuery 的地方。

从日期选择器开始，我开始编写 jQuery 脚本，但不出所料，它不起作用。

$('#StartDateCal').on('submit', function(g) { 
    g.preventDefault();  //prevent form from submitting
    var startdate = $("#StartDate").val();
    $.ajax ({
        type: 'post',
        url: 'calendar_inner.php',
        data: data,
        dataType: 'text'
    });
});

请对我温柔一点。我在 jQuery 方面偶尔取得的成功仅限于我能够几乎逐字复制别人的代码的情况。谢谢。

编辑我已经根据 Raslett 的建议修改了我的脚本，但我还没有找到解决方案。

$('#StartDateCal').on('submit', function(g) { 
    g.preventDefault();  //prevent form from submitting
    $.ajax ({
        type: 'post',
        url: 'calendar_inner.php',
        data: $('#StartDateCal').serialize(),
        success: function(result) {
            $('#getresult').html(result);
        }
    });
});

现在整个页面不再刷新，只有calendar_inner.php文件刷新，所以这是一个小小的成功。我认为现在的问题是如何处理结果。使用上面的代码并放置

<div id="getresult"></div>

在calendar_inner.php的开头将我的404错误页面插入到整个页面中。将 html(result) 更改为 text(result) 会将 404 错误页面的整个代码写入同一空间。我不知道脚本生成的是什么导致服务器调用 404 错误页面。

第二次编辑我摆脱了 404 错误。我调用的网址错误。现在这个问题已经得到纠正，我已经越来越接近了，但剩下要做的事情却相当神秘。该脚本现在将表的第一行写入两次:一次的开始日期为 1 月 1 日，第二次的开始日期为原始开始日期。所以现在我要做的就是:1. 说服表行的第一个版本使用新的开始日期2. 停止显示第二个版本的表行3. 将开始日期传递到表格的下一部分，计算并写入价格唷!不容易。

第三次编辑正如 Rasclatt 所说，jQuery 现在可以工作了，我只需要整理 calendar_inner.php 文件即可。为了简单起见，我只是将前几行放在下面。关键变量是 $startdate，它驱动其他所有内容。我需要 jQuery 来更改 $startdate 的值。

第四次编辑更新了 calendar_inner.php 的代码并显示了更多内容。见下文。

<div id="getresult"></div>
<script>
$(document).ready(function() {
//Submit change of date in price tab without refreshing page
$('#StartDateCal').on('submit', function(g) { 
        g.preventDefault();  //prevent form from submitting
        $.ajax ({
            type: 'post',
            url: '/includes/calendar_inner.php',
            data: $('#StartDateCal').serialize(),
            success: function(result) {
                console.log(result),
                $('#getresult').html(result);
            }
        });
    });
});
</script>
<?php
if(isset($_POST['StartDate']) && !empty($_POST['StartDate'])) {
            $startdate  =   htmlentities($_POST['StartDate'], ENT_QUOTES);
            $firstdate  =   date('Y-m-d',$startdate);
            $lastdate   =   date('Y-m-d',strtotime('+11 days',strtotime($firstdate)));

            // database insertion of above variables
        }else{
            $firstdate = date('Y-m-d',$startdate);
$lastdate = date('Y-m-d',strtotime('+11 days',strtotime($firstdate)));
        }

//Select database
require_once('../Connections/MySQL.php');
mysql_select_db($database_MySQL, $MySQL);
mysql_set_charset("utf8");

// Create a temporary table
$query_temptable = "CREATE TEMPORARY TABLE temptable (dt DATE NOT NULL)";
$result = mysql_query($query_temptable, $MySQL) or die(mysql_error());

//Now loop through the date range and fill the temporary table
$thisdate = $firstdate;
while (strtotime($thisdate) <= strtotime($lastdate)){
$query_insertdate = "INSERT INTO temptable (dt) VALUES ('$thisdate')";
$result2 = mysql_query($query_insertdate, $MySQL) or die(mysql_error());
$thisdate = date('Y-m-d', strtotime('+1 day', strtotime($thisdate)));
}

// MySQL query to get price_id (or blank) for all dates in range
$query_tariff = "SELECT temptable.dt, lh_dates.tariff_id FROM temptable LEFT JOIN lh_dates ON temptable.dt = lh_dates.dt AND hid = '$hid'";
$tariff = mysql_query($query_tariff, $MySQL) or die(mysql_error());

// Create array of tariff_ids
$i = 0;
$tariff_id_list = array();
while ($row_tariff = mysql_fetch_assoc($tariff)) {
$tariff_id_list[$i] = $row_tariff['tariff_id'];
$date_list[$i] = $row_tariff['dt'];
$i++;
}
$tariff_id_unique = array_unique($tariff_id_list);

// Drop the temporary table
$query_droptable = "DROP TEMPORARY TABLE IF EXISTS temptable";
$result3 = mysql_query($query_droptable, $MySQL) or die(mysql_error());

//Here we start building the pseudo-table using divs 
echo "<div class='calendar'>";
// Dates row
echo "<div class='toprow'>"; 
echo "<div class='cal_firstcol'>&nbsp;</div>";
$i = 0;
$thisdate=strtotime($firstdate);
while ($i++ < 12) {
$day_week = date('D', $thisdate); 
$day_num = date('j', $thisdate);
$month_name = strtoupper(date('M', $thisdate));
echo "<div class='cal_dates'>";
echo $day_week."<br><span class='cal_day'>".$day_num."</span><br>".$month_name;
$thisdate = $thisdate+86400;
echo "</div>"; 
}
echo "<div class='clear'></div></div>";

// Room rows
//MySQL query to get rooms
$query_room = "SELECT room_id, roomtype, normalocc, singleocc, extrabed, childbed, cot FROM lh_rooms WHERE hid = '$hid' ORDER BY orderr ASC";
$room = mysql_query($query_room, $MySQL) or die(mysql_error());
while ($row_room = mysql_fetch_assoc($room)) {
foreach ($tariff_id_unique as $value) {
$tariff_id = $value;
$room_id = $row_room['room_id'];
$query_price = "SELECT * FROM lh_prices WHERE tariff_id = '$tariff_id' AND room_id = '$room_id'";
$price = mysql_query($query_price, $MySQL) or die(mysql_error());
$row_price[$value] = mysql_fetch_assoc($price);
}

echo "<div class='row'>"; 
echo "<div class='cal_firstcol'>".$row_room['roomtype']."</div>";
$thisdate = $firstdate;
$i=0;
while (strtotime($thisdate) <= strtotime($lastdate)){
$thisday = strtolower(date('D',strtotime($thisdate)));
echo "<div class='cal_pricecol'>";
if (in_array($thisday, $we_rates)) {
echo $row_price[$tariff_id_list[$i]]['price_we_std'];   
}else{
echo $row_price[$tariff_id_list[$i]]['price_wd_std'];
}
echo "</div>";
$i++;
$thisdate = date('Y-m-d',strtotime('+1 day',strtotime($thisdate)));
}
echo "</div>";

if (($row_room['extrabed']>=1)||($row_room['childbed']>=1)) {
echo "<div class='row hiddenrow' style='display:none'>"; 
echo "<div class='cal_firstcol'>Child Extra Bed</div>";
$thisdate = $firstdate;
$i=0;
while (strtotime($thisdate) <= strtotime($lastdate)){
$thisday = strtolower(date('D',strtotime($thisdate)));
echo "<div class='cal_pricecol'>";
echo $row_price[$tariff_id_list[$i]]['price_eb_c']; 
echo "</div>";
$i++;
$thisdate = date('Y-m-d',strtotime('+1 day',strtotime($thisdate)));
}
echo "<div class='clear'></div></div>";
}

}

echo "</div>"; 
?>

第五次编辑(!)回复 Rasclatt，这是脚本运行后表格的样子。 日期选择器、上一个、复选框和下一个都位于父页面中。从 9 月 30 日开始的第一行日期是脚本的结果，第二行日期被编码到 calendar_inner.php 中。搬家

<div id="getresult"></div>

页面下方相应地移动第一行日期。日期选择器表单的代码是

<form id="StartDateCal">
<input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>">
<input type="hidden" name="lang" id="lang" value="<?php echo $$ln ?>">
From <input name="StartDate" id="StartDate" class="datebox" size="10" value="<?php echo date('j M Y', $startdate) ?>" type="date"> 
<input name="submit" class="button" id="CalSubmitBtn" type="submit" value="Go">
</form>

Answer 1

这应该加载表单，然后加载脚本，该脚本将通过 AJAX 自动加载您的表到 <div id="get result"></div>容器。提交表单后，它应该加载到覆盖表格的同一位置。因此，为了澄清，您不会运行任何 php 在原始加载页面上构建表。您运行 php 的目的就是计算 $hid , $$ln ，和$startdate 。您的calendar_inner.php仅包含日历代码，加载页面仅包含表单和 jQuery。

作为一个选项，我向 CheckDates(FetchResults) 添加了首选项哪里FetchResults是容器的名称。以防万一您想将其加载到不同的容器名称中。

<form id="StartDateCal">
<input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>">
<input type="hidden" name="lang" id="lang" value="<?php echo $$ln ?>">
From <input name="StartDate" id="StartDate" class="datebox" size="10" value="<?php echo date('j M Y', $startdate) ?>" type="date"> 
<input name="submit" class="button" id="CalSubmitBtn" type="submit" value="Go">
</form>
<div id="getresult"></div>
<script>
    function CheckDates(FetchResults)
        {
             $.ajax ({
                type: 'post',
                url: '/includes/calendar_inner.php',
                data: $("#StartDateCal").serialize(),
                success: function(result) {
                 $("#"+FetchResults).html(result);
                }
            });
        }
    $(document).ready(function() {
        // Auto load ajax
        CheckDates('getresult');
        // On submit load ajax
        $('#StartDateCal').submit(function() {
            // Add a loader image or text so you know it's refreshing
            $('#getresult').html("Loading...");
            // Run table loader
            CheckDates('getresult');
            return false;
        });
    });
</script>