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

dzhpxtsq  于 2021-06-21  发布在  Mysql
关注(0)|答案(2)|浏览(339)

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

  1. jQuery(document).ready(function(){
  2. jQuery("#holiday-submit").click(function(event){
  3. event.preventDefault();
  4. //var name = jQuery("#dname").val();
  5. var date = jQuery("#holiday").val();
  6. var reason =jQuery("#holiday-reason").val();
  7. jQuery.ajax({
  8. type: 'POST',
  9. url: MyAjax.ajaxurl,
  10. data: {"action": "add_holiday", "holiday":date, "reason" :reason},
  11. success:function(data){
  12. jQuery("#holiday-status").addClass("success");
  13. jQuery("#holiday-status").html( "New Holiday added " + date +" " + reason);
  14. }
  15. });
  16. });
  17. });

在函数文件中,我有以下内容

  1. function add_holiday(){
  2. $holiday = $_POST['holiday'];
  3. $reason = $_POST['reason'];
  4. global $wpdb;
  5. $table1= $wpdb->prefix.'holidays';
  6. $results = $wpdb->get_results("select * from $table1 where holiday=$holiday");
  7. if($wpdb->num_rows == 0 ){
  8. $wpdb->insert(
  9. $table1,
  10. array(
  11. 'holiday' => $holiday,
  12. 'reason' => $reason
  13. ),
  14. array(
  15. '%s'
  16. )
  17. );
  18. die();
  19. return true;
  20. }
  21. else{
  22. die();
  23. return false;
  24. }
  25. }
  26. add_action('wp_ajax_add_holiday', 'add_holiday');
  27. add_action('wp_ajax_nopriv_add_holiday', 'add_holiday');

ajax调用和相关的回调函数都工作得很好,一旦使用下面的表单提交了数据,它就会发送到数据库并保存。
但是,我不想在数据库中添加重复的日期。
这就是为什么我添加了一个条件来检查数据库表中是否已经存在日期。理想情况下,如果日期已经添加到数据库中,我需要显示一个错误。不过,ajax调用运行时没有考虑上述条件。
解决这个问题的最佳方法是什么。
这是我的窗体和输出区域。

  1. <form action="" method="post">
  2. <input type="date" id="holiday" name="holiday">
  3. <input type="text" id="holiday-reason" placeholder="Holiday reason">
  4. <!--<input type="submit" id="holiday-submit">-->
  5. <input type="button" id="holiday-submit" value="submit" class="btn btn-primary">
  6. </form>
  7. <div id="holiday-status">
  8. </div>
  9. <div id="current-holidays">
  10. <table id="declared-holidays" class="table table-success">
  11. <thead>
  12. <tr>
  13. <th>Date</th>
  14. <th>Reason</th>
  15. </tr>
  16. </thead>
  17. <tbody>
  18. <?php
  19. $table = $wpdb->prefix.'hr_holidays';
  20. $result = $wpdb->get_results("select * from $table");
  21. foreach ($result as $holiday_item){?>
  22. <tr>
  23. <td><?php echo $holiday_item->holiday ;?></td>
  24. <td><?php echo $holiday_item->reason ;?></td>
  25. </tr>
  26. <?php
  27. }
  28. ?>
  29. </tbody>
  30. </table>
ncecgwcz

ncecgwcz1#


要调试sql查询,请使用浏览器开发人员控制台中的network选项卡,并按xhr进行过滤,如上图所示
要处理sql注入漏洞,请使用prepared语句

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

还要注意xss漏洞,千万不要相信用户输入!

  1. <td><?php echo esc_html($holiday_item->holiday) ;?></td>
  2. <td><?php echo esc_html($holiday_item->reason) ;?></td>
6fe3ivhb

6fe3ivhb2#

如果我正确理解了您的问题,那么您似乎没有向ajax success函数中的data参数返回任何内容。
尝试回显函数文件中的内容:

  1. ....
  2. echo 'success';
  3. return true;
  4. } else {
  5. die();
  6. echo 'duplicate';
  7. return false;
  8. }

而不是在success函数中使用条件语句:

  1. success: function(data) {
  2. if (data === 'success') {
  3. jQuery("#holiday-status").addClass("success");
  4. jQuery("#holiday-status").html( "New Holiday added " + date +" " + reason);
  5. }
  6. }
展开查看全部

相关问题