Question

我一直在寻找答案，但是没有发现任何有效的方法。

我在PHP页面上有一个按钮，该按钮会触发JavaScript函数，该函数从API提取JSON。然后，它遍历条目并创建了一堆元素。到目前为止，我的代码有效，因为它从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回显Java脚本，则需要转义$符号，如下所示：

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。

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

1 个答案: