如何在ajax响应页面中执行javascript？ [重复]

Question

这个问题已经在这里有了答案：

• jQuery-HTML中的脚本标签由jQuery解析并且不执行 5个答案

我正在执行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>

Answer 1

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

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

Ben Everard在这篇文章中也解释了这个概念和解决方案。 如何在jquery中调用外部url？

。 。 。

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

---

如果发现时间听起来好像您可能面临一个相当标准的问题，那就是AJAX无法以直观的方式调用事物，因此可能需要一些时间来查看Async调用的工作方式。

在其他帖子中，对AJAX调用有几个很好的答案。 如何从异步调用返回响应？

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);
     } 

希望这可以帮助！