使用Chrome瀏覽器和FF瀏覽器查看ajax發送以及從服務器傳回的數據

當咱們使用JS向一個PHP文件進行Ajax時請求時，咱們很想知道傳過來的數據到底正不正確，但因爲Ajax並非進行連接到PHP文件訪問，而是無刷新請求，因此，咱們在PHP文件中不能直接打印Ajax傳過來的數據。JS和PHP舉例以下：

$('input[name=code]').on('keyup',function(){
    $.ajax({
      type:'POST',
      url:'test.php',
      data:'code='+$(this).val(),
      success:funciton(msg){
           do something...
       }
    });
});

if($_POST['code']){
    var_dump($_POST['code']);
}

有一個表單控件，name屬性值爲code。每次按鍵後將控件的值傳給test.php文件。test.php接收到後，打印出控件中的值。然而，這樣是沒法打印的，由於當前頁面不會刷新，若是直接打印，表單控件所在的頁面內容將所有消失，這顯然不符合Ajax的方法。

那怎麼看，咱們是否是把控件中的值準確的傳輸過去了呢？下面從Chrome和FF瀏覽器進行說明。

①Chrome瀏覽器

首先，打開調試工具，快捷鍵F12，選中Network這個選項，如圖：

此時，下面是沒有任何請求信息的。

而後，咱們在表單控件中輸入值，每輸入一個值，都會進行一次Ajax請求。每次請求都會顯示在Network下面，如圖：

Name是咱們請求的地址，這裏我是向Login這個php文件請求的。

再而後，點擊login，如圖：

在Header選項的最下面，有一個Form Data，裏面的code就是咱們經過Ajax傳輸的值，這樣咱們就知道咱們有沒有把數據傳過去，而且傳得數據是否正確了。

最後，查看服務器返回的數據，如圖：

在Response選項卡中，能夠看到，服務器給咱們返回了一個字符串，2！

②FF瀏覽器

同理，點擊F12，在控制檯---網絡中能夠查看Ajax的每次請求：

點擊請求進入後，如圖：

參數便是咱們傳送的數據。

點擊響應查看服務器傳回的數據，將鼠標放在Json上顯示數據：

返回了一個3！