[jQqery] ブラウザによって、ajax()送信後 .done()でデータを受取れない。

Question

下記のコードはフォームから非同期でテキストデータを送信する際の.ajax()の部分です。
送信先のphp側で、バリテーションをかけています。php側で空白や文字数が多い場合は、エラーメッセージをjsonで出力し、エラーがない場合は、送信されたデータをデータベースへ登録し、送信完了のメッセージをjsonで出力しています。エラーと成功どらも、josnデータのメッセージをdone()内で受取り条件分岐することで、指定したタグ内に数秒メッセージを表示しています。

ここで分からないことがありまして、Google Chromeで一連の動作が、正常に動作し、一方でFirefoxとIE11では、送信が成功したのみに、.done()内でalert(data);しても、アラートダイアログが表示されず、その後の処理もされていません。従って、送信完了時のメッセージも表示されません。ただデータベースには登録されているのでajax送信は成功しています。

Google Chromeでは正常に動くので、FireboxとIE11上では、何が作用して、このようになるのかが知りたいと思い質問してみました。心当たりがありましたら宜しくお願いします。

<script>
$(document).ready(function(){
    $("#form").submit(function(event){
        
     event.preventDefault();
    
     var formData = $('form').serialize();

        $.ajax({
        url: 'http://example.com/test/comment_post/',
        type:'POST',
        data: formData,
        timeout: 10000,
        dataType: 'json',
        })
       .done(function(data){ 
         if(data.length ==1){  //エラーがある場合 jsonデータを取得できる。
           $('#notice').append('<div class="message">' + data[0] + '</div>');
           setTimeout(function() {
             $("#notice").html('');
           }, 2000);
         }else{ //送信が成功した場合 FirefoxとIE11ではjsonデータを取得できない。
            alert(data);
           $('#notice').append('<div class="message">' + data[0] + '</div>');
           $("#form")[0].reset();
           setTimeout(function() {
             $("#notice").html('');
           }, 2000); 
         }

        })
       .fail(function(){
        })
       .always(function(){
        });

     }); 

});   
     
  
</script>

Answer 1

Google Chromeでは正常に動いてしまうので、javascript部分に問題があると思っていましたが、実はphp側のjsonの出力の際に問題があり、下記のように、ヘッダーの下でechoしていますが、その下にも処理を書いていたのですが、それらをheaderの上の行に書き換えたら正常に動くようになりました。今後気おつけたいと思います。

header("Content-Type: application/json; charset=utf-8");
echo json_encode($success, JSON_PRETTY_PRINT);
//echoの下に処理を書いてはだめ