Javascript 将数据集从函数返回到 xmlhttprequest 获取参数

Question

我有一个用 php 变量填充的数据属性。 php 变量是一个数值。

<?php $userId = 123; ?>
<div class="agent-detail-info" data-id="<?= $userId ?>"></div>

我试图从数据集中获取值并将其传递给 get url 参数。我已将其放入 window.onload 自己的函数中，因为 php 会动态打印 html。

function userData() {
  let infoWrap = document.querySelector(".agent-detail-info").dataset.id;
  console.log(infoWrap);
  return infoWrap;
}
window.onload = userData;

const request = new XMLHttpRequest();
request.open(
  "GET",
  `url&usertolookup=${userData()}`
);

Console.log(infoWrap) 在控制台中返回正确的值，但控制台显示错误并且不填充获取参数

Uncaught TypeError: Cannot readproperties of null (reading 'dataset') at userData

I'我认为发生这种情况是因为请求在调用 userData 函数之前运行并且 DOM 尚未填充？

这是有效的：

function userData() {
  let infoWrap = 123;
  return infoWrap;
}

我尝试将请求包装到加载 DOM 后运行的函数中，但这也不起作用。

Answer 1

您应该在 window.onload 末尾运行代码，以便它在 .agent-detail-info 元素添加到 DOM 后运行。运行 userData() 本身不会执行任何操作。

window.onload = () => {
  const request = new XMLHttpRequest();
  request.open(
    "GET",
    `url&usertolookup=${userData()}`
  );
};