Question

我在页面上有一个下拉选择器，允许用户选择模板类型（例如，＆＃34;人类＆＃34;或＆＃34;狗＆＃34;）。

根据选择的模板，需要在下拉列表下方填充不同的字段（例如，＆＃34的文本字段;父母姓名＆＃34;或＃34;品种＆＃34的下拉列表;）每个模板都是唯一的。
我将有一个按钮，一旦放入数据字段，用户将点击该按钮，将数据输出到＆＃34;输出div＆＃34;单击时同一页面的部分（没有POST数据，因为它没有被保存）。输出将根据所选模板具有不同的输出逻辑（例如，＆＃34;我是人类名为X＆＃34;或者＆＃34;我是狗，我的品种是Y＆＃34; ）。

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

对于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

将数据从jQuery传递到PHP的最佳方法是使用AJAX。 Mozilla有一个很棒的guide on getting started，我建议你关注。您可以通过尝试以下方式获得如何实现所要求的一个示例：

var selected_template = $('#my-template-dropdown :selected').text();
var ajaxurl = 'ajax.php',
data =  {'select_template': selected_template };
$.post(ajaxurl, data, function (response) {
    console.log(response);
});

在PHP端（我的例子中的Ajax.php）它可能看起来像这样

if(isset($_POST['select_template'])) {
    // do something with the input from jQuery
    $selected_template = $_POST['select_template'];
    // return the result back to the client
    echo $seleted_template;
}

?>

$ selected_template将被发送回客户端，AJAX函数中的响应将是服务器返回的任何内容。所以console.log（响应）应该显示发送到服务器的任何内容

Answer 2

<强> 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);
});

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

另一种选择是将提交的数据POST到某个PHP控制器，该控制器生成并返回输出。这样你所有的逻辑就在一个地方。例如，这里用户的点击将查询生成初始模板的同一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);
        }
    });
});

Answer 3

您可以查看函数wp_localize_script。

此功能通过wp_enqueue_scripts操作为页面上的JS文件提供PHP数据。

这不像Ajax请求那样工作，只在页面加载时填充特定句柄的数据。但是你可以在同一个脚本中将这个方法与ajax混合使用。

希望它有所帮助，即使它似乎不适合你的情况。

由于您的课程未在页面加载时触发，您可以使用操作wp_ajax_{custom _action}和wp_ajax_nopriv_{custom_action}。例如，通常用于填充多个下拉列表，每次用户触发事件时，php函数都会返回结果js脚本。

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

3 个答案: