如何在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