从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不是函数

所以我在成功通话中放置一个断点，这是Chrome控制台中的结果：

如您所见，我定位的div元素存在！我的数据也存在！那么为什么我不能将它附加到div元素#upload-result？

Answer 1

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

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

或：

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