ajax,php,mysql中当前日期计数为8时禁用日期

Question

我正在尝试禁用特定日期的计数为 8 的特定日期。在我的代码中，特定日期在 8 次计数后无法使用。在 8 次计数后出现警报框。而不是警报框，我必须禁用特定日期..我怎样才能禁用日期..这是代码。

<input type="date" name="mass_date" id="txtDate" required="required" /></div>

<script>  
         $(document).ready(function() {
            $('#txtDate').change(function(){
                var selectedDate = $(this).val();
                $.ajax({
                    type: 'GET',
                    url: "http://localhost/check_date.php?selectedDate=" +selectedDate, 
                    success: function(data) {
                        var status= JSON.parse(data);
                        if((status=="SUCCESS")) {
                            $('#submitButton').prop('disabled', false);
                        } else {
                            alert('Opps! Booking is not available for this day');
                        }
                    }
                });
            });
        });
    </script>

check_date.php

<?php 
    error_reporting(E_ALL);
    include_once "db.php";
    $selectedDate = $_GET['selectedDate'];

    $query2=mysqli_query($con,"SELECT COUNT(*) as booking_count FROM shrine_mass WHERE mass_date='$selectedDate'") or die(mysqli_error($con));
    $row=mysqli_fetch_array($query2,MYSQLI_ASSOC);
    $count = $row['booking_count'];
    if($count < 8) {
        echo json_encode("SUCCESS");

    } else {
        echo json_encode("FAIL");
    }

Answer 1

据我了解您的问题，您希望阻止用户在其他用户选择 8 次后输入给定日期。使用@Martin 的答案，您将完全禁用日期输入，我认为这不是您所追求的。我想您正在寻找一种解决方案，该解决方案可以防止输入“订满”日期，而不是输入其他日期。

我认为您无法阻止在 type="date" INPUT 中选择任何日期。有一些属性可以将输入限制在日期范围内，但不限制特定日期 范围内。

因此，唯一可能的解决方案必须是根据某些数据检查新输入的日期，以确定它是否可以使用。您目前正在 ajax 调用期间执行此操作，坦率地说，假设您的应用程序同时可供多个用户使用，这是唯一可行的方法。您在页面加载时可能传递给浏览器的任何数据都可能在几秒钟后被其他用户的操作呈现为“过时”。

所以我对你的问题的回答是不，没有办法比你当前的策略更好地实现你想要的，或者引用你的数据库的一些变体。

Answer 2

编辑：向下滚动！

警告 您对 SQL 注入（SQLI 攻击）持开放态度。请使用Prepared Statements and Parametized queries。

话虽如此，我将重写您的 PHP 页面以遵循准备好的语句和参数化查询的准则。

至于您问题的 jQuery 部分，我相信您正在寻找的是 property 函数.prop("disabled", true);。您已经将它用于您的 submitButton，除了您通过将属性设置为 false 来启用按钮。

jQuery 示例，使用您的代码：

 $(document).ready(function() {
    $('#txtDate').change(function(){
        var selectedDate = $(this).val();
        $.ajax({
            type: 'GET',
            url: "http://localhost/check_date.php?selectedDate=" +selectedDate, 
            success: function(data) {
                var status= JSON.parse(data);
                if((status=="SUCCESS")) {
                    $('#submitButton').prop('disabled', false);
                } else {
                    $('#txtDate').prop("disabled", true);
                }
            }
        });
    });
});

您的 PHP 页面，使用 Prepared Statement 和 Parametized 查询：

<?php
// Your input GET variable
$selectedDate = $_GET['selectedDate'];

// DB variables
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}

// Declare the query
$sql = "SELECT COUNT(*) as booking_count FROM shrine_mass WHERE mass_date = ?";

// Prepare and bind
$stmt = $conn->prepare($sql);
$stmt->bind_param('s', $selectedDate);

// Execute the query
$stmt->execute();

// Bind result variable and fetch value
$stmt->bind_result($booking_count);
$stmt->fetch();

// Close connection
$stmt->close();
$conn->close();

if($booking_count < 8) {
    echo json_encode("SUCCESS");

} else {
    echo json_encode("FAIL");
}
?>

片段示例，显示 .prop("disabled", true); 实际操作：

 $(document).ready(function() {
	$('#txtDate').prop("disabled", true);
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row d-flext justify-content-center">
	<div class="col-md-4">
		<input type="date" name="mass_date" id="txtDate" class="form-control" required="required" />
	</div>
</div>

Codepen 示例here.

编辑：

由于您想禁用特定日期，具体取决于数据库中该日期的计数，那么我建议使用 jQuery datepicker 或 Bootstrap datepicker。我将继续使用 jQuery datepicker。

更多关于 jQuery datepicker here.

首先，您需要在数据库中查询您的逻辑适用的日期，即日期出现超过 8 次的日期。

示例：

SELECT
    mass_date
FROM
    mass_table
GROUP BY
    mass_date
HAVING
    COUNT(*) > 8;

DB Fiddle here.

这个想法是您创建一个 JavaScript 数组，其中包含您要禁用的日期。然后，您希望使用符合您逻辑的日期填充此数组。

您的主页可能如下所示：

<?php
// DB variables
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if($conn->connect_error){
  die("Connection failed: " . $conn->connect_error);
}

// Declare the query
$sql = "SELECT mass_date FROM mass_table GROUP BY mass_date HAVING COUNT(*) > 8";

// Prepare
$stmt = $conn->prepare($sql);

// Execute the query
$stmt->execute();

// Get result of query
$result = $stmt->get_result();

// Close connection
$stmt->close();
$conn->close();
?>

<script>
// The array containing the dates to be disabled in the datepicker
let disabledDates = [];

<?php
// Loop through our query results
while($data = $result->fetch_assoc()) {
    ?>
    // Push the dates into the disabledDates array
    disabledDates.push("<?php $data['mass_date']; ?>");
    <?php
}
?>

// jQuery datepicker function
$('#txtDate').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ disabledDates.indexOf(string) == -1 ]
    }
});
</script>

<div class="row d-flext justify-content-center">
    <div class="col-md-4">
        <input type="date" name="mass_date" id="txtDate" class="form-control" required="required" />
    </div>
</div>

jQuery datepicker 禁用日期 here 的 Codepen 示例。