个人中心
gpt4 book ai didi

javascript 不适用于 ajax 加载的内容；不使用jquery

转载 作者：行者123 更新时间：2023-12-03 02:10:33 24 4
gpt4 key购买 nike

我正在使用 ajax 将“mysite/math/”中的所有内容加载到 math.php 中。在 math.php 中，我想使用 katex 渲染加载的数学内容。

https://github.com/Khan/KaTeX

在 math.php 中，我从 CDN 加载了 katex 库，可以在上面的链接中找到该库。

math.php 的 html:

<body>
  <div id='main'>
</body>

在 math.php 的脚本标签内，我有一些 php 可以从“mysite/math/”获取网址列表

echo "var x = [];";
$dir = "./math/";
$a = scandir($dir);
foreach ($a as $x) {
if ($x === '.' or $x === '..') continue;
  echo "x.push('mysite/math/" . $x . "');";
}

因此，这给了我一个数组 x，其中包含我想要将其内容加载到网页中的每个文件的位置。

现在，在 javascript 中，我对数组 x 中的 url 进行多次 AJAX 调用:

// defining the ajaxing function
function myfunction(url, someFunction) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      someFunction(this, url);
    }
  };
  xhr.open('GET', url, true);
  xhr.send(null);
}

// defining the callback function
function callbackfunction(xhr, url) {
  var name = url;
  var div = document.createElement('div');
  div.innerHTML = xhr.responseText;
  div.className += name;
  document.getElementById('main').appendChild(div);
}

// here, I'm actually executing the ajax calls
for (var i = 0; i < x.length; i++) {
  myfunction(x[i] + '?w=' + Math.random(), callbackfunction);
}

到目前为止，所有这些都运行良好。

问题:

在“mysite/math/”内的每个 html 文件中，都有带有 class='math' 的 span 标记，其中包含我想要呈现的数学内容。因此，在 math.php 中，我看到了所有内容，并且看到了带有 class='math'; 的 span 标签。他们都在那里。

在 math.php 中还有以下使用 katex 函数 katex.render() 的 javascript

var math = document.getElementsByClassName('math');
for (var i = 0; i < math.length; i++) {
  katex.render(math[i].innerHTML, math[i]);
}

如果内容不是使用ajax加载的，我使用katex的方式工作得很好。

注意:我已经多次看到这个问题，但答案总是使用 jquery。我想要一个 JavaScript 解决方案。

最佳答案

问题很可能是当浏览器调用 katex.render 时，您的 AJAX 提供的内容尚未出现在页面上。

由于您要进行多次调用来加载内容，因此您需要等到所有调用都返回后才能调用 katex.render。我可以想到使用普通 JavaScript 有几种方法来做到这一点:

  1. 创建一个事件处理程序来监听每个调用的完成情况。当它们全部完成时(也许跟踪变量中完成的调用数量)，调用katex.render。
  2. 将每个 AJAX 调用包装在一个 Promise 中，将它们全部推送到一个数组中，然后在该数组上调用 Promise.all。在 Promise.all().then() 中，调用 katex.render。

关于javascript 不适用于 ajax 加载的内容；不使用jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49590617/

24 4 0
文章推荐： javascript - 如何将变量从node.js传递到html
文章推荐： javascript - 我可以在 javascript/html 中预加载音频文件并在网络丢失后播放吗？
文章推荐： javascript - 如何根据其他变量设置一个变量
文章推荐： javascript - 为什么 GetElements 不返回直接结果？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com