用AJAX返回HTML片段中的JavaScript脚本

当在网页中使用Ajax技术返回HTML片段时，如果这个HTML片段中含有JavaScript脚本，会出现一些问题：脚本可能不会执行，或者执行了但无法扮演其预期的角色。为了解决这个问题，可以采取以下策略：

1. 将JavaScript从HTML片段中分离出来，放在页面的 head 区或者外部js文件中。

在Ajax请求返回的HTML片段中，如果包含用户需要的JavaScript代码，可以拆分这个代码段，将方法名或变量名放入全局变量中，而把完整的JavaScript代码单独存放在 .js 文件中，最终将这个 .js 文件追加到 head 区域或者 body 标签的最后面。

1. 直接执行JavaScript脚本。

如果代码量少，可以至直接返回包含JavaScript的 HTML 片段到网页中运行。但需要注意，这种方式更适合于特殊情况而非一般场景。因为通常而言，最好还是将 JavaScript 代码单独拿出来存放，可以提高性能，节省流量。

下面举两个例子，来说明如何使用上述方法：

例1: 通过 get 方式获取 HTML 片段，并注入头部

前端代码：

$.get('http://www.example.com/ajax/part.html', function(data) {
    var scriptData = $(data).filter('script').html();
    $("head").append("<script type='text/javascript'>" + scriptData + "</script>");
    $(data).find("#content").appendTo("#container");
}, "html");

后端代码：

<?php
echo <<<EOT
<div id="content">
  <p>Some ajax returned content.</p>
  <script>
      $('.result').css('background-color','yellow');
  </script>
</div>
EOT;
?>

这段代码会使用 jQuery 的 get 方法取回一个 HTML 片段，其中包含一个脚本，在头部注入 JavaScript 代码并将数据片段追加到容器内。

例2: 通过 get 方式获取 HTML 片段，并直接执行JavaScript脚本

前端代码：

$.get('http://www.example.com/ajax/part.html', function(data) {
    $("#container").append(data);
}, "html");

后端代码：

<?php
echo <<<EOT
<div id="content">
    <p>Some ajax returned content.</p>
    <script>
        $('.result').css('background-color','yellow');
    </script>
</div>
EOT;
?>

这段代码会使用 jQuery 的 get 方法取回一个 HTML 片段，其中包含一个脚本，它将直接被执行，将结果添加到容器中。

以上两个例子都可以解决Ajax返回的HTML片段中JavaScript脚本不执行的问题，开发者可以根据实际情况来选择使用哪种方法。