如何在AJAX上接收PHP表，并在DIV中显示它？

我开始使用AJAX，接下来的几件事我都在努力。 我在Wordpress工作，有自定义表格。 顺便说一下，这就是为什么会有全局$wpdb

首先，我有一个Select，当您选择一个选项时，ID值将存储在jQuery中的一个变量中。这是由

onchange="selectRequest(this)"


global $wpdb;
$Estado = $wpdb->get_results("SELECT * FROM cor_estado;");
?>
<p>Busqueda por Estado</p>
<select class="select" id="estado" name="estado" value="" type="text" onchange="selectRequest(this);">
    <option value="" disabled selected>Seleccione un estado...</option>
    <?php 
    foreach ($Estado as $Estados ) {
        echo "<option value='".$Estados->estado_id."' type='text'>".$Estados->nombre_estado."</option>";
    }
    ?>
    </select>

onchange=“选择请求（此）”
全球$wpdb；
$Estado=$wpdb->get_results（“选择*FROM cor_Estado；”）；
?>
布斯奎达波埃斯塔多酒店

塞列克奥尼·恩斯塔多。。。
不要接收JSON格式的数据，而是使用HTML格式的数据&直接替换表中的数据。使用该选项，您的基本问题“每个选择选项中的信息量将不同”将得到解决。
使用HTML格式的数据，而不是接收JSON格式的数据&直接替换表中的数据。使用该选项，您的基本问题“每个选择选项中的信息量将不同”将得到解决。
没有固定的规则。。。有时在php中创建html并将其格式化后返回会更快，因此可以直接显示，有时返回原始数据并在javascript/jquery中处理会更好

如果从ajax请求中获得的数据只是为了显示，而不需要修改任何依赖于当前视图中其他元素的内容，那么我将直接在php中格式化html响应。如果您需要更改某些内容，那么我可能会使用JSON

在ajax请求中，您建立JSON作为数据格式，因此PHP中的响应必须是JSON。你差点就成功了。取消对foreach的注释，但不使用自变量（$info1，$info2）创建一个包含响应所需字段的数组，并设置键名。例如

$response = array();

foreach ($Estado as $row) {
    $response['municipio'] = $row->nombre_municipio;
    $response['estado'] = $row->nombre_estado;
    .....
}

创建数组后，将其转换为JSON并返回

打印（json编码（$response））

然后，在jQueryAjax成功函数中，您可以使用以下命令访问每个字段

data.municipio or data['municipio']
data.estado or data['estado']
...

我希望这有帮助
没有固定的规则。。。有时在php中创建html并将其格式化后返回会更快，因此可以直接显示，有时返回原始数据并在javascript/jquery中处理会更好

如果从ajax请求中获得的数据只是为了显示，而不需要修改任何依赖于当前视图中其他元素的内容，那么我将直接在php中格式化html响应。如果您需要更改某些内容，那么我可能会使用JSON

在ajax请求中，您建立JSON作为数据格式，因此PHP中的响应必须是JSON。你差点就成功了。取消对foreach的注释，但不使用自变量（$info1，$info2）创建一个包含响应所需字段的数组，并设置键名。例如

$response = array();

foreach ($Estado as $row) {
    $response['municipio'] = $row->nombre_municipio;
    $response['estado'] = $row->nombre_estado;
    .....
}

创建数组后，将其转换为JSON并返回

打印（json编码（$response））

然后，在jQueryAjax成功函数中，您可以使用以下命令访问每个字段

data.municipio or data['municipio']
data.estado or data['estado']
...

我希望它能有所帮助，所以，这里的基本问题是，我在Wordpress环境之外使用工具（JS、PHP、HTML和CSS）按照步骤进行操作，这就是问题所在。我仍然在解决关于AJAX请求的一些问题，我将尽可能快地更新这个答案


基本上Wordpress有自己使用AJAX的方式，所以无论我觉得这个“看起来”是否正确，Wordpress网站都不会显示任何内容

这是我用来解决问题的方法

<!-- language: lang-js -->
UPDATED CODE
jQuery(document).ready(function() {
    jQuery('#estado').change(function() {
    var selectVal = jQuery('option:selected').val();
    selectVal = selectVal.toString();
    jQuery.ajax({
        url:"/cors/wp-admin/admin-ajax.php",   
        type:"POST", 
        data:{action:'my_action', selectVal: selectVal},
        success:function(data){
            jQuery("#municipio_result").hide(500);
            jQuery("#municipio_result").removeData();
            jQuery("#municipio_result").html(data);
            jQuery("#municipio_result").show(500);
            },
       });  
    });
});

这是写行的“默认”方式，但您需要用两件事来完成它们


您在AJAX请求中使用的动作值，在我的例子中是“my_action”，在本例中是“your_action_name”
第二个值是在functions.php文件中创建的函数的名称

对我来说，结果会是这样：

add_action('wp_ajax_my_action', 'selectEstado');
add_action('wp_ajax_nopriv_my_action', 'selectEstado');

使用'your_action_name'和'your_function_name'的值：

add_action('wp_ajax_your_action_name', 'your_function_name');
add_action('wp_ajax_nopriv_your_action_name', 'your_function_name');

第一行是针对登录用户的，第二行是针对访客的，如果您希望为登录用户和访客显示不同的内容，则需要为每个用户创建一个函数，并且只使用一个属性

add_action('wp_ajax_your_action_name', 'your_function_name1'); // for registered users
add_action('wp_ajax_nopriv_your_action_name', 'your_function_name2'); // for visitors

同样，如果您想深入了解，这是用admin-ajax.PHP编写的PHP代码

当我第一次使用时发送数据时，我已经发现了我的问题：

data:{action:'my_action', selectVal: 'selectVal'},

基本上，我在selectVal上发送给Wordpress的是字符串

selectVal

因此，当我的函数试图根据接收的数据查找id时，它什么也找不到，因为它是一个带有这些字母的字符串

解决方案

jQuery(document).ready(function() {
    jQuery('#estado').change(function() {
    var selectVal = jQuery('option:selected').val();
    selectVal = selectVal.toString();
    jQuery.ajax({
        url:"/cors/wp-admin/admin-ajax.php",   
        type:"POST", 
        data:{action:'my_action', selectVal: selectVal}, // The right way to send it
        success:function(data){
            jQuery("#municipio_result").hide(500);
            jQuery("#municipio_result").removeData();
            jQuery("#municipio_result").html(data);
            jQuery("#municipio_result").show(500);
            },
       });  
    });
});

我现在发送的是值，现在我的AJAX success:函数接收完整的表，我还更改了jQuery代码，因为在第一个示例中，添加“.hide（）或.show（）”时，它发送了多个错误

要按用户角色添加条件，可以编辑admin-ajax.php，以简化所有ajax请求

我知道这太长了，但是如果您遇到一些问题，我想解释一下所使用的所有不同元素，以便更容易理解Wordpress中AJAX的使用情况。
因此，这里的基本问题是，我使用工具（JS、PHP、HTML和CSS）按照步骤进行操作在Wordpress环境之外，这就是问题所在。我仍然在解决关于AJAX请求的一些问题，我将尽可能快地更新这个答案


基本上Wordpress有自己使用AJAX的方式，所以无论我觉得这个“看起来”是否正确，Wordpress网站都不会显示任何内容

这是我用来解决问题的方法

<!-- language: lang-js -->
UPDATED CODE
jQuery(document).ready(function() {
    jQuery('#estado').change(function() {
    var selectVal = jQuery('option:selected').val();
    selectVal = selectVal.toString();
    jQuery.ajax({
        url:"/cors/wp-admin/admin-ajax.php",   
        type:"POST", 
        data:{action:'my_action', selectVal: selectVal},
        success:function(data){
            jQuery("#municipio_result").hide(500);
            jQuery("#municipio_result").removeData();
            jQuery("#municipio_result").html(data);
            jQuery("#municipio_result").show(500);
            },
       });  
    });
});

这是写行的“默认”方式，但您需要用两件事来完成它们


您在AJAX请求中使用的操作值，在我的例子中是“my_action”，在本例中是“your”
selectVal

jQuery(document).ready(function() {
    jQuery('#estado').change(function() {
    var selectVal = jQuery('option:selected').val();
    selectVal = selectVal.toString();
    jQuery.ajax({
        url:"/cors/wp-admin/admin-ajax.php",   
        type:"POST", 
        data:{action:'my_action', selectVal: selectVal}, // The right way to send it
        success:function(data){
            jQuery("#municipio_result").hide(500);
            jQuery("#municipio_result").removeData();
            jQuery("#municipio_result").html(data);
            jQuery("#municipio_result").show(500);
            },
       });  
    });
});