获取对 ajax 响应中 JS 对象的引用

getting reference to JS objects inside ajax response

本文关键字：对象 引用 JS ajax 响应 获取      更新时间：2023-09-26

我正在通过ajax加载一个包含JS对象的html页面。如何将新加载的（子）页面中的对象引用到父页面？

父母：

//parent.html
<script>
    function ParentObject() {
        this.children = new Array();
    }
    var aParentObject = new ParentObject();
    $.get('/url/to/child.html', function(data) {
        $("#child-div").html(data);
    });
</script>

孩子：

//child.html
<div>Some html element</div>
...
<script>
    function ChildObject() {
        this.someProperty = "I'm a Child";
    }
    var aChildObject = new ChildObject();
</script>

声明新变量时应使用 var

var aChildObject = new ChildObject();

当您附加包含 jscript 的 html 时，脚本将执行，之后您将获得引用。因此，必须确保在插入子变量后访问它。

$.get('/url/to/child.html', function(data) {
    $("#child-div").html(data);
    //Access your child here
    alert(aParentObject.someProperty);
});
您可能

希望使用.load()代替.get()。使用.load()您可以为"子"页面指定选择器，以拉回要检索的特定部分。

假设孩子的.html div有id="child-div"： 

//parent.html
<script>
    function ParentObject() {
        this.children = new Array();
    }
    aParentObject = new ParentObject();
    $("#child-div").load('/url/to/child.html #child-div');
</script>

请参阅此处的"加载页面片段"部分：http://api.jquery.com/load/

相关文章：