jQuery ajax 混合 html/js <script> 避免 <script> 打开时丢失上下文

Posted 2023-03-10

【中文标题】jQuery ajax 混合 html/js <script> 避免 <script> 打开时丢失上下文

【英文标题】：jQuery ajax mixed html/js <script> avoid losing context when <script> opens

【发布时间】：2012-02-11 19:17:07

【问题描述】：

我面临以下情况。 我使用 ajax 与使用混合 html/js 代码响应的后端进行通信。我使用 html() 函数在 div 中加载我的内容 - 即$("#mydiv").html(ajaxResponse);

但是，嵌入在ajaxResponse 中<script> 标记中的js 代码在全局（窗口）上下文中运行，而不是我预定义的。

在这种情况下有什么办法可以改变执行的上下文吗？

代码如下所示

index.html:

<div id="mydiv"></div>
<script type="text/javascript">
$(function()
   $.ajax(
      url: '/myAjaxResponse.html',
      context: $(this),
      success: function(resp)  $("#mydiv").html(resp); 
   );
);
</script>

myAjaxResponse.html：

<!-- Some html... really just anything :) -->
<script type="text/javascript">
    console.log($(this));   // $(this) points to window object :(
</script>

【问题讨论】：

您想要的上下文是什么？ #mydiv?

【参考方案1】：

编辑：呃，等等，我才意识到我误解了你的问题……

由于您要插入到 DOM 中，所有通过 XHR 加载的 JS 都自动在 window 范围内 - 而且，afaik，没有合适的方法解决这个问题。 $.ajax() 的所有context 选项所做的，就是在回调函数中设置this 的值。

（另外，请查看 this answer，它比我能更好地解释事情）。

一种可能的方法是设置一个您可以稍后调用的全局变量（类似这些行）：

var context;

$(function()
   context = $('whatever');
   $.ajax(
      url: '/myAjaxResponse.html',
      success: function(resp)  $("#mydiv").html(resp); 
   );
);

myAjaxResponse.html：

<script type="text/javascript">
    $this = context;
    console.log($this);   // $this points to whatever you set context to before XHR
</script>

---

长话短说：$(this)，在您调用$.ajax() 的上下文中，确实指向window。

你可以/应该选择

$(function()
   $.ajax(
      url: '/myAjaxResponse.html',
      context: $('#mydiv'),
      success: function(resp)  $("#mydiv").html(resp); 
   );
);

或（有点奇怪）与

$(function()
   $('#mydiv').each(function()
       $.ajax(
          url: '/myAjaxResponse.html',
          context: $(this),
          success: function(resp)  $("#mydiv").html(resp); 
       );
   )
);

… 其中this 指向被$.each() 迭代的元素。

【讨论】：

"所有通过 XHR 加载的 JS 都自动在窗口范围内" 没错。

啊，我的错（错字），是的，在 $.ajax(context: $("#mydiv)... ) 中是我的意思 :) 所以，唯一的方法是通过全局变量对吗？:(所以，如果构建一些 uid，请将其附加到 #mydiv 数据并基于该 uid “选择”它应该可以正常工作吗？（还将阅读提供的链接 - 谢谢 :)