javascript - PHP将内容回显到div中

Question

我正在尝试将 php 中生成的 html 和 javascript 插入到页面的 div 中。

.php 文件:

function get_preset() {
    return (bunch of html, javascript);
}

b.php:

<div id="preset_preview">
    //<?php echo get_preset(); ?> //this works well, but I need to execute this every time I click a button in jquery.
</div>

我可以使用ajax在jquery和a.php之间成功进行通信，但是如何将从php中的get_preset函数调用返回的内容放入preset_preview div中？

有没有办法做到这一点而不使用ajax从get_preset函数调用将数据发送到jquery，然后使用jquery将其放入preset_preview div？

每次从 jquery 请求时，php 都能以某种方式单独完成这样的操作吗？

所以我使用jquery ajax调用php来执行这个:

<div id="preset_preview">
    <?php echo get_preset(); ?>
</div>

令我困惑的是，php 可以成功完成此操作(如上面的示例所示)，而无需先使用 ajax 向 jquery 发送数据。

Answer 1

.php 文件

function get_preset() {
    return (bunch of html, javascript);
}

echo get_preset();

b.php 文件

<button type="button" id="preview">Preview Preset</button>
<div id="preset_preview">
    <?php include "a.php"; ?>
</div>

<script>
    $('#preview').on('click', function(e) {
        e.preventDefault();
        $("#preset_preview").load('a.php');
    });
</script>

jQuery AJAX 有多种方法可供您实际使用。上面的示例使用 load() 它使用 get 方法包装您的请求(无论如何，您可以通过调用 ajaxSetup() 覆盖其请求方法)到 a.php 的相对 URL。

可以看到a.php echo ing(字符串？)get_preset()函数将被放置在 <div id="preset_preview"> 内在 b.php 文件中。

<小时/>

在这种情况下扩展AJAX的需求是因为PHP只做了类似的事情

1. 获取请求，无论采用何种方法(get、post、put 等)
2. 返回响应。通常是在你做了一些与请求值相关的逻辑之后。

只要您的预期响应呈现给客户端，它就会终止。返回响应后，您无法在墙后立即执行任何魔法。换句话说，需要加载页面。

然后 AJAX 会帮助您创建另一个对相应 PHP 文件的请求。它恢复 PHP 文件来执行(另一个)请求 -> 执行一些逻辑 -> 然后返回它。静默地，无需页面加载。

并回应评论 - 可以通过函数调用以某种方式完成此操作，而不在预设_预览中包含实际的 php 文件吗？

都是的。只要您满足调用者的需求即可。

.php 文件

function get_preset() {
    return (bunch of html, javascript);
}

echo get_preset();

a.php 就是 echo ing get_preset() .

b.php

<button type="button" id="preview">Preview Preset</button>
<div id="preset_preview"></div>

<script>
    $('#preview').on('click', function(e) {
        e.preventDefault();
        $("#preset_preview").load('a.php');
    });
</script>

b.php 文件只是对 a.php 文件进行请求。每当选择器 id #preview 的按钮单击它会将任何 a.php 内容加载到 #preset_preview .

您还可以在页面准备好后渲染 a.php 的内容。这与上面写的我的第一个片段类似。

<script>
    $(document).ready(function() {
        $('#preset_preview').load('a.php');
    });

    $('#preview').on('click', function(e) {
        e.preventDefault();
        $("#preset_preview").load('a.php');
    });
</script>

它只是告诉您应该在 b.php 页面准备就绪后立即加载 a.php，并在单击按钮后“重新加载”它。