首页 > 解决方案 > 如何在 JavaScript 生成的输出中包含 PHP 文件的内容?

问题描述

我有一个 JS 脚本,它会抓取一些数据并将结果输出到屏幕上。这很好用。我现在需要做的是将该输出包装在一些 pre 和 post 内容 php 文件中以进行格式化,但我似乎无法让它工作。

这是脚本现在所在的位置:

   <!DOCTYPE html>
    <html>
    <head>

        <meta charset="utf-8"/>
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/main.css">

    </head>
    <body>

    <img id="loading-gif">

    <script>
        $('#loading-gif').hide();
        $(document).ready(function () {
            $('#loading-gif').show();

            $.ajax({
                url: "https://aajumpseat.com/dev/include/pre.content.php'); ?>",
                type: 'GET',
                dataType:"json",
                success: function(data) {
                    pre = JSON.parse(data);
                    document.write(pre);
                }
            });

            $.ajax({url: "https://aajumpseat.com/dev/scrape/getSegments.php"}).done(function (data) {
                $('#loading-gif').hide();

                output = JSON.parse(data);
                document.write(output);

            });

            $.ajax({
                url: "https://aajumpseat.com/dev/include/post.content.php'); ?>",
                type: 'GET',
                dataType:"json",
                success: function(data) {
                    post = JSON.parse(data);
                    document.write(post);
                }
            });


        });

    </script>

    </body>
    </html>

第二个 ajax 调用完美运行并将结果输出到屏幕,这正是我想要的。我想做的是将 pre.content.php 的内容放在结果之前,将 post.content.php 的内容放在结果之后,以便结果格式正确。

'pre.content.php 中执行的一些 php 是对格式化 html 的补充,而 'post.content.php 仅包含结束正文和 html 标签。

如果需要,我可以将所需的 html 硬编码到上述脚本中,但如果有人有一个优雅或不那么优雅的解决方案来说明如何包含这两个文件,我将不胜感激。

谢谢。

标签: javascriptphp

解决方案


有一个专门为此调用的函数$.load()<div>使用withid然后使用.innerHTML而不是 using总是更好document.write()

$(function () {
  $("#stuff").load("/path/to/api/call");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stuff"></div>

如果你有多个电话,那也没关系。只要有多个容器。

$(function () {
  $("#stuff").load("/path/to/api/call");
  $("#pre").load("/path/to/api/code");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stuff"></div>
<pre id="code"></pre>

需要注意的一点是,它$.load()会触发 AJAX GET 请求。


推荐阅读