跨页面更新输入框值时出现jQuery [object object]异常求助

嘿，我来帮你捋捋这个问题哈～你现在遇到的核心问题其实很明确：

为啥会显示[object Object]？ #

• 你写的loadData函数最后返回的cont是一个jQuery对象，但document.write()这个方法只认字符串啊！你直接把jQuery对象塞进去，它就会默认转换成[object Object]这个字符串，这就是你看到的奇怪结果。
• 另外多说一句，document.write()在页面加载完成之后用的话，会直接清空整个页面，这大概率不是你想要的效果，这种方式现在其实很少用了，不太推荐。

怎么改才能正常显示？ #

给你两种思路，推荐第二种哈：

思路1：如果一定要用document.write（不推荐） #

那你得把修改后的jQuery对象转换成HTML字符串再传进去，修改你的loadData函数和Ajax回调：

function loadData(htmlContent) {
    // 把Ajax返回的HTML字符串转成jQuery对象
    var $cont = $(htmlContent);
    // 找到输入框修改值
    $cont.find("#first").val("update val");
    // 关键：返回修改后的HTML字符串，不是jQuery对象
    return $cont.prop('outerHTML'); // 或者用$cont.html()，看你需要整个容器还是内部内容
}

$.ajax({
    url: url,
    type: "POST",
    dataType: "html",
    success: function(response) {
        var updatedContent = loadData(response);
        // 现在传入的是字符串，就不会显示[object Object]了
        document.write(updatedContent);
    },
    error: function(err) {
        console.log("加载出错啦：", err);
    }
});

思路2：用DOM操作替换内容（强烈推荐） #

放弃document.write()，用jQuery的DOM操作方法来更新页面，比如把内容放到一个指定的容器里，这样既不会清空页面，也更符合前端开发的最佳实践：

function loadData(htmlContent) {
    var $cont = $(htmlContent);
    $cont.find("#first").val("update val");
    return $cont; // 这里可以直接返回jQuery对象，因为后面用DOM方法处理
}

$.ajax({
    url: url,
    type: "POST",
    dataType: "html",
    success: function(response) {
        var $updatedCont = loadData(response);
        // 假设你要把内容放到id为"target-container"的元素里
        $("#target-container").empty().append($updatedCont);
        // 或者直接替换这个容器的内容：$("#target-container").html($updatedCont.html());
    },
    error: function(err) {
        console.log("加载出错啦：", err);
    }
});

额外提醒 #

以后再遇到类似的问题，记得先看看你传给方法的参数类型对不对，像document.write()、innerHTML这些都只接受字符串，而jQuery对象是一个复杂的对象，直接传肯定会出问题的～

内容的提问来源于stack exchange，提问作者Eva