Ajax返回文字,而不是html

时间:2019-03-23 16:34:38

标签: jquery ajax

我有一个完整的代码,可通过带有JSON数据类型的Jquery AJAX从PHP获取值。 但是在完成ajax之后,它不会响应html。它成为文本。

结果变成这样。

$("#category li").one('click', function() {

    var catId = $(this).attr("id");

    var that = this;

    $.ajax({
            type: 'GET',
            url: '<?php echo base_url()."dashboard/getsubcategory/"; ?>'+catId,
            dataType: 'html',
            data: { category: catId},
            beforeSend: function() {
                $("#loader").show();
            }
        })

    .done(function(data){
        var categories = JSON.parse(data)

        $.each(categories, function(k,category) {

            that.after('<li class="collection-item">'+category.id+'</li>');

        });

    })
    .fail(function() {

        alert( "Fetch failed." );

    });

});

JSON输出:

[
  {
    "id": "7",
    "name": "Blazer & Suits"
  },
  {
    "id": "8",
    "name": "Blouses & Shirts"
  },
  {
    "id": "9",
    "name": "Friendly URL in CodeIgniter"
  }
]

为什么返回到:

&lt;li class="collection-item"&gt;7&lt;/li&gt;
&lt;li class="collection-item"&gt;8&lt;/li&gt;
&lt;li class="collection-item"&gt;9&lt;/li&gt;

我期望的输出是

<li class="collection-item">7</li>
<li class="collection-item">8</li>
<li class="collection-item">9</li>

预览:

http://prntscr.com/n1x0ey

请帮助..

非常感谢。

1 个答案:

答案 0 :(得分:0)

您正在将对Element的引用存储在变量 that 中,并使用该引用将其附加到文档中。您应该先包装元素,然后再调用方法。

此外,在您的ajax调用中,当您似乎希望使用 json 时,会将值 dataType 设置为 html

因此,总结起来,您的代码应如下所示:

$("#category li").one('click', function() {
    var $that = $(this);
    var catId = $that.attr("id");

    $.ajax({
        type: 'GET',
        url: '<?php echo base_url()."dashboard/getsubcategory/"; ?>'+catId,
        dataType: 'json',
        data: { category: catId},
        beforeSend: function() {
            $("#loader").show();
        }
    })
    .done(function(data) {
        data.forEach(function(category) {
            $that.after('<li class="collection-item">'+category.id+'</li>');
        });
    })
    .fail(function() {
        alert( "Fetch failed." );
    });
});