Ajax和json_encode在Firefox中回显文本而不是json

Question

我有一个小脚本，可以将运费从PHP / CodeIgniter返回到HTML。

这是PHP代码，包含一些数据示例数据：

public function atualiza_frete_ajax() {

   $response_array = array(
       'html_select_frete' => "<form><select><option></option></select></form>"
           );                
    header("Content-Type: application/json", true);
    echo json_encode($response_array);
  }

和JS / jQuery

      function atualizar_frete_ajax() {
            var $form = $("#form-cep");
                $(".loading").fadeIn();
                $.ajax({
                    type: $form.attr("method"),
                    url: $form.attr("action"),
                    dataType: "json",
                    data: $form.serialize()
                    }).done(function(data){
                        $(".frete-valor").html(data.html_select_frete)
                        $(".loading").hide()
                     });
                event.preventDefault();
        }

现在问题是：它在Chrome中效果很好，但在Firefox中我只是得到了这个讨厌的文本输出。

这里是FF如何输出它的打印屏幕：http://prntscr.com/5cfcgc

我确保文件编码是UTF8而没有BOM，我在回复响应之前使用了正确的标题。

任何线索？

Answer 1

它无法正常工作，因为您没有阻止默认行为。 event.preventDefault()是对的，但您需要正确使用它。如果您想在表单提交时执行此AJAX请求，则应使用以下内容：

    $(document).on('submit', '#form-cep',function(e)
    {
        e.preventDefault();
        var $form = $(this);
            $(".loading").fadeIn();
            $.ajax({
                type: $form.attr("method"),
                url: $form.attr("action"),
                dataType: "json",
                data: $form.serialize()
                }).done(function(data){
                    $(".frete-valor").html(data.html_select_frete)
                    $(".loading").hide()
                 });        
    });

此外，通过此approuch，您再也无法获得FireFox错误。

修改

如果你还需要它作为功能，你可以使用它：

function atualizar_frete_ajax() 
{
    var $form = $("#form-cep");
        $(".loading").fadeIn();
        $.ajax({
            type: $form.attr("method"),
            url: $form.attr("action"),
            dataType: "json",
            data: $form.serialize()
            }).done(function(data){
                $(".frete-valor").html(data.html_select_frete)
                $(".loading").hide()
             });
}


$(document).on('submit', '#form-cep',function(e)
{
    e.preventDefault();
    atualizar_frete_ajax();   
});