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中有一些正在执行的php，这是html格式的补充，而'post.content.php中仅包含结束正文和html标签。

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

谢谢。

Answer 1

有一个专门为此功能的函数$.load()。最好将<div>与id一起使用，然后使用.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。它使您无法控制编写任何内容的文档中的 where 。而是在要编写输出的位置定义元素：

<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 个答案: