javascript - 从 jQuery AJAX 调用返回的 HTML 表现得很奇怪

Question

我有一些由我的 PHP 表单处理程序脚本回显的 HTML。进行的调用是 AJAX 调用，这里是 jQuery AJAX 调用。

$(function() {
    $('#file').bind("change", function() {
        var formData = new FormData();
        //loop for add $_FILES["upload"+i] to formData
        for (var i = 0, len = document.getElementById('file').files.length; i < len; i++) {
            formData.append("file" + i, document.getElementById('file').files[i]);
        }

        //send formData to server-side
        $.ajax({
            url: "file-upload.php",
            type: 'post',
            data: formData,
            dataType: 'html',
            async: true,
            processData: false,  // tell jQuery not to process the data
            contentType: false,   // tell jQuery not to set contentType
            success : function(data) {
                alert('success!!');
                $('#upload-result')[0].html(data);
            },
            error : function(request) {
                alert('error!!');
                console.log(request.responseText);
            }
        });
    });
});

我收到一个奇怪的错误:

TypeError: undefined is not a function

因此，我在成功调用中放置了一个断点，以下是 Chrome 控制台中的结果:

如您所见，我的目标 div 元素存在!我返回的数据也存在!那么为什么我不能将其附加到 div 元素#upload-result？

Answer 1

当您索引 jQuery 集合时，您将获得底层 DOM 元素。 .html() 是一个 jQuery 方法，而不是 DOM 方法。应该是:

$('#upload-result').html(data);

或者:

$('#upload-result')[0].innerHTML = data;