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