php - превратить список входных данных в строку json

Question

У меня есть список входов. Количество слотов зависит от "foreach", который декодирует строку json и зацикливает значения следующим образом:

    slot-1 : <input id="slot-1" type="texte" value="#FFFF00"><br>
    slot-2 : <input id="slot-2" type="texte" value="#9ACD32"><br>
    slot-3 : <input id="slot-3" type="texte" value="#008000"><br>
    slot-4 : <input id="slot-4" type="texte" value="#0d98ba"><br>
    slot-5 : <input id="slot-5" type="texte" value="#0000ff"><br>
    slot-6 : <input id="slot-6" type="texte" value="#8a2be2"><br>
    ....
    ...
    ..
    .

Я пытаюсь найти лучший метод для json_encode после изменения значений, чтобы получить этот шаблон: {"идентификатор входа": "значение ввода",}

{"slot-1":"#FFFF00","slot-2":"#9ACD32","slot-3":"#008000","slot-4":"#0d98ba","slot-5":"#0000ff"}

И отправьте его с помощью jQuery ajax-запроса, подобного этому

$(document).on('click', '#actualiser', function(){
        var couleurs = '<?php echo $slots; ?>';
        $.ajax({
            url:"/url.php",
            method:"POST",
            data:{
                slots:slots
                },
            success:function(data)
            {   
                console.log("ok");
            }
        })
    });

Я сделал тест, но у меня только очень грязный процесс. Есть идеи, чтобы добиться этого "чистого"?

Answer 1

PHP происходит до того, как HTML отправляется в браузер. Таким образом, вы публикуете все, что вы установили как php var, что означает, что никакие изменения не будут приняты.

Вместо этого просто возьмите входные данные с помощью $('#whatever').val(), а затем поместите это в свой раздел данных

Answer 2

1.Вы должны получить все входные данные, а затем отправить в PHP

$(document).on('click', '#actualiser', function(e){
  e.preventDefault();
  var couleurs =[];
  $('#actualiser-form input').each(function(){
    var item = {};
    item[$(this).attr('id')] = $(this).val();
    couleurs.push(item);
  });
  
  var jsonString = JSON.stringify(couleurs);
  console.log(jsonString);
  $.ajax({
    url:"/url.php",
    method:"POST",
    data: jsonString,
    success:function(data)
    {   
      console.log("ok");
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="actualiser-form">
  slot-1 : <input id="slot-1" type="text" value="#FFFF00"><br>
  slot-2 : <input id="slot-2" type="text" value="#9ACD32"><br>
  slot-3 : <input id="slot-3" type="text" value="#008000"><br>
  slot-4 : <input id="slot-4" type="text" value="#0d98ba"><br>
  slot-5 : <input id="slot-5" type="text" value="#0000ff"><br>
  slot-6 : <input id="slot-6" type="text" value="#8a2be2"><br>
  
  <input type="submit" id="actualiser" name="submit" value ="Click me" />
</form>

2. При завершении проверки PHP вы получаете данные или нет

<?php
if(isset($_POST)){
  echo"<pre/>";print_r($_POST); // check and then do next code accordingly
}

Answer 3

Вы можете попробовать что-то вроде этого:

$(document).on('click', '#actualiser', function(e){
        e.preventDefault();
        var couleurs = $('#actualiser-form').serialize();
        $.ajax({
            url:"/url.php",
            method:"POST",
            data: couleurs,
            success:function(data)
            {   
                console.log("ok");
            }
        })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="actualiser-form">
  slot-1 : <input name="slot-1" type="texte" value="#FFFF00"><br>
  slot-2 : <input name="slot-2" type="texte" value="#9ACD32"><br>
  slot-3 : <input name="slot-3" type="texte" value="#008000"><br>
  slot-4 : <input name="slot-4" type="texte" value="#0d98ba"><br>
  slot-5 : <input name="slot-5" type="texte" value="#0000ff"><br>
  slot-6 : <input name="slot-6" type="texte" value="#8a2be2"><br>
  
  <button type="submit" id="actualiser">Click me</button>
</form>