Щелчок по массиву для загрузки конфигурации

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 } ?>

После щелчка по сборке следующий код получает innerhtml элемента div, помещает его в переменную 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

Я не очень понимаю.Все, что вам нужно сделать, это создать массив, который вы можете легко зациклить в JavaScript.Например:

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

json_encode () ваш массив для вашего ответа ajax.В JavaScript просто зациклите массив.Если мы признаем, что наши ключи - это идентификаторы каждого флажка:

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

Answer 2

Прежде всего, вы ДЕЙСТВИТЕЛЬНО должны увидеть wp_ajax_{action} и wp_ajax_nopriv_{action} для запросов ajax в Wordpres.

По твоей проблеме, я не понимаю, где и почему ты застрял. Поскольку вы уже проделали самую сложную работу (JS => PHP), дать результаты JS действительно просто, потому что он действительно может только читать JSON (в ответе ajax).

Итак, в PHP, когда конфигурация загружена (нажав на # loader1), вы сделали свой AJAX-запрос и просто заголовок закодировали в JSON-ответ хорошо сконструированным объектом и повторили его с помощью json_encode ()

Вот моя функция для вывода ответов JSON в PHP:

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

NB: Вы также можете добавить dataType param к методу $.ajax(), но всегда лучше иметь правильный заголовок; -)