javascript - PHP 嵌入式 JavaScript - ES6 反引号 - 嵌套时它们可以工作吗？

Question

我四处寻找这个问题的答案，但没有找到任何有效的方法。

我在 PHP 页面上有一个按钮，可以触发从 API 获取 JSON 的 JavaScript 函数。然后它循环遍历条目并创建一堆元素。到目前为止，我的代码是有效的，因为它从 API 返回 JSON 数据，并且没有错误。但它不显示结果。

我怀疑嵌入的 JS 和 ES6 模板字符串的使用不起作用。这是我的代码:

    <?php
  // Testing JavaScript. Might be a bit hack-ish. Never used PHP with API's.
  echo "<script>
  document.getElementById('getAPI').addEventListener('click', getAPI);
  function getAPI() {
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((res) => res.json())
    .then((data) => {
      let output = '<h2>API Result:</h2>';
      data.forEach(function(user) {
        output += `
          <div>
            <h3>${user.title}</h3>
            <p>${user.body}</li>
          </div>
        `;
      });
      document.getElementById('output').innerHTML = output;
    })
  }
  </script>";
?>

有人能看到任何明显的东西吗？我不完全确定这是实现这一目标的有效方法。

Answer 1

问题不在于反引号运算符，而在于事实上您正在使用 $双引号字符串内的符号。 PHP 会尝试将其计算为变量，因此您的 Javascript 最终呈现为:

output += `
          <div>
            <h3></h3>
            <p></p>
          </div>
        `;

如果您确实必须让 PHP 回显 Javascript，那么您需要转义 $标志，像这样:

output += `
          <div>
            <h3>\${user.title}</h3>
            <p>\${user.body}</li>
          </div>
        `;

但是就像 Robin 在对你的问题的评论中指出的那样，你最好将 PHP 与 Javascript 分开。

例如:

<?php
  // Testing JavaScript. Might be a bit hack-ish. Never used PHP with API's.
  // ... other PHP code
?>
  <script>
  document.getElementById('getAPI').addEventListener('click', getAPI);
  function getAPI() {
    fetch('https://jsonplaceholder.typicode.com/posts')
    .then((res) => res.json())
    .then((data) => {

      let output = '<h2>API Result:</h2>';
      data.forEach(function(user) {
        output += `
          <div>
           <h3>${user.title}</h3>
           <p>${user.body}</p>
          </div>
        `;
      });

      document.getElementById('output').innerHTML = output;
    })
  }
  </script>

<?php
 // ... more PHP code

?> 

最后一件事 - 你有<p></li>无效的 HTML。