php - 使用 jquery 与 php 类交互的最佳实践？

Question

我在页面上有一个下拉选择器，允许用户选择模板类型(例如“人”或“狗”)。

1. 根据选择的模板，需要在下拉列表下方填充不同的字段(例如，“ parent 姓名”的文本字段或“品种”的下拉列表)，这些字段对于每个模板都是唯一的。

2. 我将有一个按钮，一旦输入数据字段，用户将单击该按钮，单击该按钮会将数据输出到同一页面的“输出 div”部分(不会发布数据，因为它没有被保存) 。根据所选模板，输出将具有不同的输出逻辑(例如，“我是一个名为 X 的人”或“我是一只狗，我的品种是 Y”)。

我的真实程序会更复杂，每个模板都会有一个 php 类来存储所有逻辑。由于我将处理 php 对象和 jquery 收集的变量，那么让它们交互的最佳方式是什么？

对于 1.，我知道我可以做一些简单的事情，比如 -

var selected_template = $('#my-template-dropdown :selected').text();
if (selected_template == 'Human'){
                $('#my-fields').html('<?php echo HumanTemplate::render_fields(); ?>');
            }

这很简单，但是对于2。我需要将变量从jquery传递到php，然后将输出返回到jquery。

在我开始走上错误的道路之前，我想要一些关于最简单方法的建议。

Answer 1

HTML

允许用户选择模板类型:

<form>
    <select id="my-template-dropdown" name='template'>
        <option value="dogs">Dogs</option>
        <option value="humans">Humans</option>
    </select>
</form>

<div id="my-fields"><div>
<div id="output"><div>

jQuery

每当用户更改模板选择时，都会通过 AJAX 请求显示新内容，并将其插入当前页面，这样页面就不必刷新:

$('#my-template-dropdown').on('change', function() {
    var template = $(this).val();
    $.ajax({
        url: 'http://your-site/path/to/' + template,
        success: function(resp) {
            $('#my-fields').html(resp);
        }
    });
});

PHP

http://your-site/path/to/template 只是生成您想要为该模板显示的 HTML，例如(只是一个示例，不知道这是否适合您的应用程序):

if ($template == 'humans') {
    echo HumanTemplate::render_fields();
} else if ($template == 'dogs') {
    echo DogTemplate::render_fields();
}

对于第 2 部分，假设您引用的所有逻辑都在 PHP 呈现的模板中，那么您可以使用 jQuery 处理它。这非常粗糙，您可能需要更复杂的东西(例如，将变量交换到其中的完整模板？)，但您明白了:

$('#output').on('click', 'button', function(e) {
    e.preventDefault();
    // fields in your template which the user will fill
    var species = $('#species').val(),
        title = $('#title').val();
    // Probably better to have this text as a template in your source
    $('#output').html("I'm a " + species + ' named ' + title);
});

注意事件处理程序中的陷阱。事件处理程序只会附加到定义处理程序时存在的元素。由于内容是在页面加载后注入(inject)的，因此当单击通过插入的按钮时，像 $('#button).on('click', function() {... 这样的事件处理程序将不起作用AJAX。此处的语法附加到父 #output div，该 确实 在页面加载时存在，并过滤按钮上的点击。有关详细信息，请参阅 jQuery event delegation docs .

另一种选择是将提交的数据 POST 到某个 PHP Controller ，该 Controller 生成并返回输出。这样你的所有逻辑就集中在一个地方。例如，此处用户的单击将查询生成初始模板的同一 PHP 文件，这次包括用户输入的值。然后它可以生成所需的输出并将其返回，以插入到页面上。您需要更新 PHP，以便它可以确定正在处理哪些情况(例如隐藏字段？)；或者，如果您想将它们分开，您可以将另一个 PHP 文件放在一起。

$('#output').on('click', 'button', function(e) {
    var template = $('#my-template-dropdown').val(),
        $form = $('form'),
        data = $form.serialize(); // Values from all fields user has entered
    $.ajax({
        url: 'http://your-site/path/to/' + template,
        data: data,
        success: function(resp) {
            $('#output').html(resp);
        }
    });
});