Question

我有一个输入列表。插槽的数量取决于＆＃34; foreach＆＃34;解码一个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的最佳方法以获得此模式：{＆＃34;输入＆＃39; s＆＃34;：＆＃34;输入＆＃39; s值＆＃34 ;，}

{"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");
            }
        })
    });

我已经完成了测试，但是我的过程非常混乱。任何想法都能实现这一目标＆＃34;清洁＆＃34; ？

Answer 1

您可以尝试这样的事情：

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

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

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

Answer 3

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
}

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

3 个答案: