为什么 ajax 调用运行并创建重复项

Question

我添加了一个 ajax 按钮来将一些数据发送到 wordpress 数据库中的自定义表。

这就是我所拥有的。

jQuery(document).ready(function(){

    jQuery("#holiday-submit").click(function(event){
        event.preventDefault();
        //var name = jQuery("#dname").val();
        var date = jQuery("#holiday").val();
       var reason =jQuery("#holiday-reason").val();
        jQuery.ajax({
            type: 'POST',
            url: MyAjax.ajaxurl,
            data: {"action": "add_holiday", "holiday":date, "reason" :reason},
            success:function(data){
                jQuery("#holiday-status").addClass("success");
                jQuery("#holiday-status").html( "New Holiday added " + date +" " + reason);
                }
        });
    });
});

然后在函数文件中，我有以下内容

function add_holiday(){
    $holiday = $_POST['holiday'];
    $reason = $_POST['reason'];
    global $wpdb;

    $table1= $wpdb->prefix.'holidays';
    $results = $wpdb->get_results("select * from $table1 where holiday=$holiday");
        if($wpdb->num_rows == 0 ){
            $wpdb->insert(
                    $table1,
                array(
                    'holiday' => $holiday,
                    'reason'  => $reason
                ),
                array(
                    '%s'
                )
            );
            die();

            return true;
        }
        else{
            die();
            return false;
        }
    }

add_action('wp_ajax_add_holiday', 'add_holiday');
add_action('wp_ajax_nopriv_add_holiday', 'add_holiday');

ajax调用和相关回调函数都工作正常，一旦使用以下表单提交数据，它就会发送到数据库并保存。

但是，我不想将重复的日期添加到数据库中。

这就是为什么我添加了一个条件来检查数据库表中是否已经存在日期。理想情况下，如果日期已添加到数据库中，我需要显示错误。然而，ajax 调用在不考虑上述条件的情况下运行。

解决此问题的最佳方法是什么。

这是我的表单和输出区域。

<form action="" method="post">

            <input type="date" id="holiday" name="holiday">
            <input type="text" id="holiday-reason" placeholder="Holiday reason">
            <!--<input type="submit" id="holiday-submit">-->
            <input type="button" id="holiday-submit" value="submit" class="btn btn-primary">
        </form>
<div id="holiday-status">

</div>

        <div id="current-holidays">
            <table id="declared-holidays" class="table table-success">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>Reason</th>
                </tr>
                </thead>
                <tbody>
                <?php
                $table = $wpdb->prefix.'hr_holidays';

$result = $wpdb->get_results("select * from $table");

foreach ($result as $holiday_item){?>
<tr>
    <td><?php echo $holiday_item->holiday ;?></td>
    <td><?php echo $holiday_item->reason ;?></td>
</tr>
    <?php
}
?>
                </tbody>
            </table>

Answer 1

要调试您的 sql 查询，请使用浏览器开发人员控制台中的网络选项卡并按 xhr 过滤，如上图所示

使用准备好的语句来处理你的 sql 注入漏洞

$results = $wpdb->get_results(
    $wpdb->prepare("select * from $table1 where holiday=%s",$holiday)
);
var_dump($results); // this will show in the xhr request as shown above

还要注意 xss 漏洞，永远不要相信用户输入！

<td><?php echo esc_html($holiday_item->holiday) ;?></td>
<td><?php echo esc_html($holiday_item->reason) ;?></td>

Answer 2

如果我正确理解了您的问题，那么您似乎不会将任何内容发送回 ajax 成功函数中的 data 参数。

尝试从你的函数文件中回显一些内容：

  ....
  echo 'success';
  return true;
} else {
  die();
  echo 'duplicate';
  return false;
}

比在成功函数中使用条件语句：

success: function(data) {
  if (data === 'success') {
    jQuery("#holiday-status").addClass("success");
    jQuery("#holiday-status").html( "New Holiday added " + date +" " + reason);
  }
}