Question

我正在实现一种使用户能够加载他们创建的配置的方法。该应用程序是3D模型产品配置器。通过单击网页上的许多元素来创建模型，这些元素会改变模型的外观。

我将解释发生的情况。

当用户单击“保存”时，将html元素的单击发送到数组并发送到数据库。他们还可以为自己的版本提供名称。

将数组从JavaScript转换为PHP

var array = [];
$('img').click(function(){

var id = $(this).attr('id');
array.push(id);
});

//Post Test
 $('#save').click(function(e) {
  e.preventDefault();
    var buildName = "GRP 120x120x90 - " + 
document.getElementById("buildName").value;


$.ajax({
  url:"readJsonSave.php",
  method: "post",
  data: { array: JSON.stringify( array ), buildName: JSON.stringify(buildName) },
  success: function(res){
  console.log(res);
  }
})
});

ReadJsonSave.php文件

require_once("../../../../wp-load.php");
global $wpdb;
global $current_user;

$table_name= $wpdb->prefix. 'product_configurator';
$DBP_buildName =   wp_unslash( $_POST['buildName'] );
$DBP_buildConfig = wp_unslash( $_POST['array'] );
$enclosure = "120x120x90";
$user_id = get_current_user_id();



$wpdb->insert($table_name,
  array(
        'user_id' => $user_id,
        'user_name' => $user_login,
        'user_email' => $user_email,
        'enclosure_type' => $enclosure,
        'keymap_key' => $DBP_buildName,
        'key_map' => $DBP_buildConfig
  ),
  array(
    '%s', //use for string format
    '%s',
    '%s',
    '%s',
    '%s',
    '%s'
  )
)

加载阵列首先向用户显示他们在保存配置时选择的“内部版本名称”。

  <?php 

    global $wpdp;
    global $current_user;

      $table_name= $wpdb->prefix. 'product_configurator';
        $DBP_results= $wpdb->get_results("SELECT * FROM $table_name WHERE user_id = $current_user->ID");
        $DBP_current_user = get_current_user_id();
  ?>

    <?php foreach($DBP_results as $DBP_cols){
        $user_id= $DBP_cols->user_id;
        $enclosure_type= $DBP_cols->enclosure_type;
        $keymap_key= json_decode($DBP_cols->keymap_key, true);
        $key_map=json_decode($DBP_cols->key_map, true);

     ?>
     <div class="load" id="loader"+ i><?php print_r($keymap_key); ?></div>

   <?php } ?>

单击构建后，下面的代码将获取div的innerhtml并将其放入javascript变量中，并将其传递给php以在数据库查询中进行匹配。

var i=0;
$('.load').each(function(){
i++;
var newID='loader'+i;
$(this).attr('id',newID);
$(this).val(i);
});

$('#loader1').click(function(){

$("#loader1").addClass("loadSelect");
var loadDump = document.getElementById("loader1").innerHTML;
console.log(loadDump);

 $.ajax({
  url:"load.php",
  method: "post",
  data: { loadDump: JSON.stringify( loadDump )},
  success: function(res){
  console.log(res);

  }
})


})

最后，在load.php中搜索并匹配查询。我现在如何使用数组$ key_map_loaded并触发单击函数，该函数将单击数组中的每个项目以在前端进行更改。

$loadDump =   wp_unslash( $_POST['loadDump'] );
print_r($loadDump);


      $table_name= $wpdb->prefix. 'product_configurator';
        $DBP_results= $wpdb->get_results("SELECT * FROM $table_name WHERE 
        keymap_key = $loadDump");
        $DBP_current_user = get_current_user_id();


     foreach($DBP_results as $DBP_cols){
        $user_id= $DBP_cols->user_id;
        $enclosure_type= $DBP_cols->enclosure_type;
        $keymap_key= json_decode($DBP_cols->keymap_key, true);
        $key_map_loaded=json_decode($DBP_cols->key_map, true);
   }

Answer 1

首先，您真的应该在Wordpres中看到wp_ajax_{action}和wp_ajax_nopriv_{action}的ajax请求。

对于您的问题，我真的不知道您在哪里以及为什么被困住。因为，您已经完成了最艰苦的工作（JS => PHP），所以给JS提供结果非常简单，因为它只能真正读取JSON（在ajax答案中）。

因此，在PHP中，当加载配置时（通过单击＃loader1），您发出了AJAX请求，并简单地使用构造好的对象对标头进行JSON编码，并通过json_encode（）进行回显

这是我的函数，用于在PHP中回显JSON响应：

function json_response($response = null)
{
    // End AJAX return if no data.
    if ($response == null)
        exit;
    // Proper headers for json output.
    header('Content-Type: application/json');
    // Output our response.
    echo json_encode($response);
    exit;
}

注意：您还可以将dataType参数添加到$.ajax()方法中，但是最好使用正确的标题；-）

Answer 2

我不太了解。您要做的就是创建一个可以轻松在javascript中循环的数组。例如：

['a' => true, 'b' => true, 'c' => false]

json_encode（）用于响应ajax的数组。在javascript中，只需循环数组即可。如果我们承认我们的钥匙是每个复选框的ID：

// Since "v" is true/false in our example
// the code is prety straightforward
$.each(json_response, function(k, v) { 
   $('#'+k).prop('checked', v); 
});

更完整的代码段：

$('body').on('click', '.config-loader', function(e) {
    e.preventDefault();
    var $this = $(this);
    $.ajax({
        method: 'post',
        url: 'load.php',
        data: {
            action: 'load_configuration',
            nonce: 'randomized_nonce_for_security',
            config_id: $this.data('config-id'),
        },
        success: function(json_response) {
            $.each(json_response, function(k, v) { 
               $('#'+k).prop('checked', v); 
            });
        }
    });
});

单击阵列以加载配置

2 个答案: