【问题标题】：How to make the Execution of the javascript in an ajax response page? [duplicate]如何在 ajax 响应页面中执行 javascript？ [复制]
【发布时间】：2014-03-23 00:41:50
【问题描述】：

我有 ajax 调用，它从该页面获取 整个页面，我正在 获取页面的一部分（其中有 javascript） 。当我附加 html 页面的部分时，javascript 不会执行。

如果我直接附加 ajax 响应，脚本将被执行并且工作正常。我的问题是，当我尝试从 ajax 响应附加页面部分时，为什么不执行 javascript？我想让它工作。有什么建议吗？

Javascript函数：

function showUsers(pageNumber) {
    $.ajax({
        url : '/ajax/users/show_users',
        data : {
            pageNumber : pageNumber == null ? 1 : pageNumber
        },
        type : 'get',
        cache : false,
        dataType: 'text',
        success : function(response, textStatus, xhr) {
            var resultData = '<div>' + response + '</div>';
            var todo = $(resultData).find("#todo");
            console.log(todo.text());
            $('#users').html(todo);
        }
    });
};

show_users.html 页面：

<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="/resources/js/jquery.js"></script>
</head>
<body>
    <h1 id="kalees">My First Heading Kalees</h1>
    <div id="todo">
        <h1>My First Heading</h1>

        <p>My first paragraph.</p>

        <script>
            $(document).ready(function() {
                alert("Hello world from ajax html page");
            });
        </script>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript jquery ajax html

【解决方案1】：

我认为您违反了“同源政策” http://en.wikipedia.org/wiki/Same_origin_policy 所以如果这是正确的问题，这应该解释原因。

“在计算中，同源策略是许多浏览器端编程语言（例如 JavaScript）的重要安全概念。该策略允许脚本在源自同一站点的页面上运行 - 方案、主机名的组合, 和端口号[1] – 访问彼此的 DOM 没有特定限制，但阻止访问不同站点上的 DOM。[1] 同源策略也适用于 XMLHttpRequest 和 robots.txt。[2]"

Ben Everard 在这篇文章中也解释了这个概念和解决方案 How to call external url in jquery?

。 . .

JSONP 是他建议的解决方案： “如果不使用 JSONP，您会遇到阻止 XmlHttpRequest 取回任何数据的同源策略”，因此您需要为其提供相同的协议和主机，以便它可以信任加载它。

如果你发现时间听起来你可能面临一个非常标准的问题，即 AJAX 不能以直观的方式调用事物，所以可能需要一些时间来看看 Async 调用是如何工作的。

在其他帖子中有几个关于 AJAX 调用的好答案。 How do I return the response from an asynchronous call?

FelixKing 在这里提供了两种解决方案来解释问题以及如何以正确的方式编写解决方案。

此外，如果这些都不起作用，您可以尝试添加错误函数并查看它告诉您的内容：

     success : function(response, textStatus, xhr) {
         var resultData = '<div>' + response + '</div>';
         var todo = $(resultData).find("#todo");
         console.log(todo.text());
         $('#users').html(todo);
     },
     error: function(e) {
         alert('Error: '+e);
     }

希望这会有所帮助！

【讨论】：