用PHP和AJAX从下拉选择中填充表格

Fill table from dropdown selection with PHP and AJAX

本文关键字：选择 填充 表格 PHP AJAX      更新时间：2023-09-26

感谢您查看我的问题。

这是目标。我创建了两个下拉列表，它们是从数据库中动态填充的。该查询提取姓名和电话号码（将来还会提取更多数据）。

我正在尝试运行一个动态比较，用户可以从每个下拉列表中选择一个项目，并在下表中比较关于他们两个选择的附加数据。

我想使用AJAX，这样用户就不需要不断地重新加载页面。我正在使用wordpress，这似乎（至少在我看来）使事情复杂化了。这是我的两个下拉列表的代码。不确定如何提取附加数据。我一直在摸索教程，但还没有接近。

global $wpdb;
$customers = $wpdb->get_results("SELECT name, phone FROM customers;");
foreach($customers as $c){
echo "<option value='name'>".$c->name."</option>";
}
echo "</select>";
echo "<select>";
foreach($customers as $c){
echo "<option value='name'>".$c->name."</option>";
}
echo "</select>";

以下是您的问题的伪过程。

第一步

由于您使用wordpress为应用程序供电，因此无法使用ajax的标准方式连接到PHP URL来轮询数据！您应该将以下代码添加到您的函数PHP中，以便访问wordpress中给定的Ajax层

function example_ajax_request(){
 //something you want to do inside this function and return json data
 die(); //closes the ajax request
}
add_action('wp_ajax_example_ajax_request', 'example_ajax_request');

注意函数名称前的wp_ajax。必须添加此项才能工作。

第二步

当您从服务器获得ajax响应时，只需从javascript中执行操作，即可将必要的数据上传到upd中。

$.ajax({
    url: <? php admin_url('admin-ajax.php') ?>,
    data: {
        'action':'example_ajax_request',
    },
    success:function(data) {
        // This outputs the result of the ajax request
        console.log(data);
    },
    error: function(errorThrown){
        console.log(errorThrown);
    }
});

复杂的部分是连接到WordpressAjax层。Ajax URL是wordpress admin-ajax.php URL的URL。您需要将操作映射到您在函数PHP中编写的函数名。

相关文章：