Question

我已将问题浓缩为以下示例代码：

<?php 
if($_GET['ajax']){
    echo '  <script type="text/javascript">
                alert("test alert");
                var newdata="Hello Again!";
                $(container).append(newdata);
            </script>';
    exit();
}
?>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            var container = document.getElementById('testdiv');
            var data = 'Hello World' ;
            $(container).append(data);
        });
        function goAjax(){
            $.ajax({
                url: '/test.php/?ajax=1',
                type: "POST",
                data: {"xxx":1},
                success: function(data){
                    $("#return").empty();
                    $("#return").append(data);
                }
            });
        };
        </script>
    </head>
    <body>
        <a href="#" onclick="goAjax();">test</a>
        <div id="testdiv"></div>
        <div id="return"></div>
    </body>
</html>

我要做的是将位于代码顶部的JS脚本加载到网页中并让它执行。

alert()执行正常，但我无法显示Hello Again!。它没有执行脚本的那部分。

有人可以帮忙解释原因吗？

请注意，使用之前定义的引用（container）对我的问题至关重要，涉及直接引用的变通方法并不能解决问题。

谢谢！

Answer 1

一种方法是使用

将该脚本注入DOM

var script = document.createElement('script');
script.innerText =  'code retrieved from ajax';
document.appendChild(script);

其他方式是来自jQuery的jQuery.getScript()。

Answer 2

我猜测Hello Again文本没有显示，因为引用的container变量在全局范围内不可用。您在此处将container定义为本地变量：

$(document).ready(function(){
    var container = document.getElementById('testdiv');
    var data = 'Hello World' ;
    $(container).append(data);
});

因此，尝试全局定义container。或者只是在返回的脚本中重新选择#testdiv（而不是完全引用container。）

要运行脚本，不要自己弄乱<script>，我绝对建议您只使用jQuery.getScript。

执行通过AJAX检索的JavaScript代码？

2 个答案: