WordPress Ajax正在重新加载页面

WordPress Ajax is reloading the page

本文关键字：加载 新加载 Ajax WordPress      更新时间：2023-09-26

所以我有这个设置工作得很好，然后突然它停止工作。我已经完成了这个功能，然后转移到另一个功能，没有编辑我的原始代码，它退出了。我删除了我对JS和PHP所做的更改(无关的，但我还是删除了它们)，它没有解决我的问题。

这是我的HTML:

<div class="container">
  <div class="list_cell_numbers">
    <a href="" class="ajax-link" id="1238675309">123-867-5309</a>
    <a href="" class="ajax-link" id="9035768321">903-576-8321</a>
  </div>
  <div class="show_conversation">
    <!--Display Database Results Here -->
  </div>
</div>

这是我的JS:

jQuery(document).ready( function($) {
  $("body").on('click', '.ajax-link', function() {
    var data = {
      action: 'sms_load_conversation',
      cell_number: $(this).attr('id'),
      user_store: <?php echo $user_home_store; ?>
  };
    $.post('http://example.com/wp-admin/admin-ajax.php', data, function(response) {
      $('#convo').html(response);
    });
    alert('clicked');
  });
});
下面是PHP处理程序脚本: 
add_action('wp_ajax_sms_load_conversation', 'sms_load_conversation');
function sms_load_conversation() {
  global $wpdb;
  if ( isset( $_POST["cell_number"] ) ) {
    $number = $_POST["cell_number"];
    $store = $_POST["user_store"];
    $sql = "SELECT * FROM sms_log WHERE cell_number = $number AND user_store = $store ORDER BY sent_date ASC";
    $msgs = $wpdb->get_results($sql);
    echo '<span class="message_option"><a class="ajax-phone-link" id="'.$number.'"><i class="fa fa-phone fa-lg fa-fw"></i>Call Customer</a></span>';
    echo '<span class="message_option"><a href="#"><i class="fa fa-archive fa-lg fa-fw"></i>Archive</a></span>';
    echo '<span class="message_option"><a href="#"><i class="fa fa-ban fa-lg fa-fw"></i>Archive & Blacklist</a></span>';

    echo '<div class="messages">';
    foreach ($msgs as $msg) {
      $thedate = strtotime($msg->sent_date);
      if($msg->bypass) echo '<div class="bypass">Filter Bypassed</div>';
      if($msg->direction == 'OUT') {
        echo '<div class="from-me">';
      } elseif ($msg->direction == 'IN') {
        echo '<div class="from-them">';
      }
      echo $msg->message . '<br />';
      echo '<span style="font-size: .65em; ">' . date('l M d   'a't  h:i:s A', $thedate) . '</span>';
      echo '</div>';
    }// msgs foreach
    echo '</div>';
    wp_die();
  }
}

发生的事情是，当我点击class="ajax-link"的锚点时，(在firebug控制台观看)，POST立即以红色显示在控制台，时间在10 - 17ms之间，并且我的页面刷新。

如果我将alert('clicked')添加到我的JS结束时，POST通常以黑色显示(+550ms)，我从ajax得到预期的响应，我得到' ' click ' ';警报，我可以看到在警报的背后，一切都发生在我的页面上，正如预期的那样，但只要我点击"确定";在警报，我的页面再次刷新，我失去了ajax响应，我刚刚得到!

我真的不明白为什么用警告来停止这个过程，一切都正常，但是没有警报，我立即刷新页面，POST行变成红色。看起来页面刷新的速度比ajax返回响应的速度要快，这就是为什么它与警报一起工作。但是为什么我的页面会刷新!?LOL .

任何想法都是赞赏的!

原因是<a>超链接的click事件的默认动作是在浏览器中加载所引用的href URL。由于您将<a>链接的href属性设置为没有""，因此单击它们实际上会在浏览器中加载相同的页面，因此看起来好像页面正在刷新，但实际上它再次加载。

解决方法是停止<a>链路的默认动作。在事件结束时返回false，这样它就不会继续执行默认操作。试试这个:

jQuery(document).ready( function($) {
    $("body").on('click', '.ajax-link', function() {
        var data = {
            action: 'sms_load_conversation',
            cell_number: $(this).attr('id'),
            user_store: <?php echo $user_home_store; ?>
        };
        $.post('http://example.com/wp-admin/admin-ajax.php', data, function(response) {
            $('#convo').html(response);
        });
        return false;
    });
});
相关文章：