WordPress的阿贾克斯重新加载页面

Question

所以我有这个设置的工作就好了，然后突然就停止工作。我完成了这个功能，并转移到另一个，并没有编辑我的原始代码，它退出。我删除了我对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"锚， （在萤火虫控制台中观看），POST立即以红色显示在控制台中我在10 - 17ms之间，我的页面刷新了。

如果我将alert('clicked')添加到我的JS的末尾，POST通常以黑色显示（+ 550ms），我从ajax得到预期的响应，屏幕上显示“clicked”提示，我可以看到警报，一切都发生在我的网页，正如预期的背后，但只要我点击“确定”进入戒备状态，我的网页再次刷新，我失去了Ajax响应我刚刚得到！

我真的不明白，为什么有警报停止的过程中，一切正常，但是没有警告我立即获取页面刷新和红色POST线。几乎看起来页面刷新的速度比ajax可以返回响应快，这就是为什么它能够与警报一起工作。但是，为什么我的页面刷新！？大声笑。

任何想法感谢！

Answer 1

的原因是click事件<a>超链接的默认行为是加载引用href网址在浏览器中。既然你设定<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; 
    }); 
});