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

时间:2018-04-29 17:04:37

标签: jquery mysql ajax wordpress

我添加了一个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>

2 个答案:

答案 0 :(得分:0)

enter image description here

要调试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>

答案 1 :(得分:0)

如果我正确理解您的问题,那么您似乎没有向ajax成功函数中的数据参数发送任何内容。

尝试回复函数文件中的内容:

  ....
  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);
  }
}