javascript - 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，并且在回显响应之前使用了正确的 header 。

有什么线索吗？

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

此外，通过此方法，您将不再收到 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();   
});