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 的最佳方法：{"input's id":"input's value",}

{"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.您需要获取所有输入数据，然后发送到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 2

PHP 发生在 html 发送到浏览器之前。因此，您发布的任何内容都设置为 php var，这意味着不会获取任何更改。

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

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>