php -将输入列表转换为json字符串。

Question

我有一个输入列表。插槽的数量取决于解码json字符串并循环如下值的"foreach“：

    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方法，以获得以下模式：{“输入的id”：“输入的值”，}

{"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

1.您需要获取所有输入数据，然后发送到

​

$(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 2

你可以试试这样的方法：

​

$(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>

​

Answer 3

PHP发生在将html发送到浏览器之前。因此，无论您将这个php设置为什么，都会发布，这意味着不会获得任何更改。

相反，只需使用$('#whatever').val()获取输入，然后将其放入数据部分。