如何在JavaScript生成的输出中包含PHP文件的内容？

Question

我有一个JS脚本，它会抓取一些数据并将结果输出到屏幕。 很好 我现在需要做的是将该输出包装在一些前后内容的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中，除了格式化html外，还有一些正在执行的php，而post.content.php中仅包含结束符和html标签。

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

谢谢。

Answer 1

有一个专门用于此的函数$.load() 。 最好使用具有id的<div>然后使用.innerHTML而不是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请求。

Answer 2

将pre.content.php的内容放在结果之前，并将post.content.php的内容放在前面

不要使用document.write 。 它可以让你在文档中，你写东西无法控制。 而是在要编写输出的位置定义元素：

<div id="pre-output"></div>
<div id="main-output"></div>
<div id="post-output"></div>

然后将输出写入这些特定位置：

pre = JSON.parse(data);
$('#pre-output').html(pre);

（或者也许是.text(pre) ？对我来说很奇怪，您正在输出原始JSON ...）

Answer 3

*******解决方案*****

我的主要php有多个任务，因此对于此特定任务，PHP是：

    $output = "    <div id='loading-gif'><img src='images/loading3.gif';></div>

<div id='main-output'></div>

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

        $.ajax({url: 'https://aajumpseat.com/dev/scrape/getSegments.php'}).done(function (data) {
            $('#loading-gif').hide();
            output = JSON.parse(data);
            //document.write(output);
            $('#main-output').html(output);
        });

    });

</script>

<div class='bottom-border'></div>
";

并进一步在页面上我有：

include('include/pre.content.php');

echo $output;

include('include/post.content.php');

这是完美的。

如何在JavaScript生成的输出中包含PHP文件的内容？

问题描述

3 个解决方案

解决方案1
1 2019-01-24 13:51:48

解决方案2
0 已采纳 2019-01-24 13:53:07

解决方案3
0 2019-01-24 15:32:41

如何在JavaScript生成的输出中包含PHP文件的内容？

问题描述

3 个解决方案

解决方案1 1 2019-01-24 13:51:48

解决方案2 0 已采纳 2019-01-24 13:53:07

解决方案3 0 2019-01-24 15:32:41

解决方案1
1 2019-01-24 13:51:48

解决方案2
0 已采纳 2019-01-24 13:53:07

解决方案3
0 2019-01-24 15:32:41