如何将许多ajax结果传递给不同的输入值？

Question

My ajax return results are four values.I want assign these values to four input value.Here my ajax code:

$.ajax({
 type:"POST",
 url:"modify_cbndtb.php",
 data: {cabinetNum:id},
 success:function (res) 
 {
 } 
});

modify_cbndtb.php code:

if(isset($_POST['cabinetNum']))
{   
 $q=$_POST["cabinetNum"];
 $sql="select num1,num2,num3,num4 from  hpc WHERE sysid= '".$q."';";
 $sel = $conn->query($sql);
}

My html code:

<div id="content" class="content">
1U:<input type="text" id="1U" value="">11U:<input type="text" id="11U" value=""><br />
2U:<input type="text" id="2U" value="">12U:<input type="text" id="12U" value=""><br />
</div>

1U.value should be num1. 2U.value should be num2. 3U.value should be num3. 4U.value should be num4. But I don't know how to realize. Who can help me?

Answer 1

I think you can try this

modify_cbndtb.php

  if(isset($_POST['cabinetNum']))
  {   
     $q=$_POST["cabinetNum"];
     $sql="select num1,num2,num3,num4 from  hpc WHERE sysid= '".$q."';";
     $sel = $conn->query($sql);
     $arr = $sel->fetch(PDO::FETCH_ASSOC);
     $data = json_encode($arr);
     echo $data;
  }

and AJAX

 client file

 $.ajax({
 type:"POST",
 url:"modify_cbndtb.php",
 data: {cabinetNum:id},
 success:function (data) {
   $('#1U').val(data[0].num1);
   $('#11U').val(data[0].num2);
   $('#2U').val(data[0].num3);
   $('#12U').val(data[0].num4);
   } 
 });

I hope it help you

Answer 2

Try this

modify_cbndtb.php

<?php
if(isset($_POST['action']))
{   
    $q=$_POST["cabinetNum"];
    $sql="select num1,num2,num3,num4 from  hpc WHERE sysid= '".$q."';";
    $sel = $conn->query($sql);

    while($row = $sel->fetch_assoc()){
            echo $row['num1'].",".$row['num2'].",".$row['num3'].",".$row['num4'];
    }
}
?>

your form

<script type="text/javascript" src="testing/jquery-3.2.1.js"></script>
<form id="form">
    <input type="submit" name="submit" id="submit">
    <input type="hidden" id="cabinetNum" name="cabinetNum" value="1">
</form>
<div id="content" class="content">
1U:<input type="text" id="1U" value="">3U:<input type="text" id="3U" value=""><br />
2U:<input type="text" id="2U" value="">4U:<input type="text" id="4U" value=""><br />
</div>

<script type="text/javascript">
$(document).ready(function(){
    $(document).on('click','#submit',function(e){
        e.preventDefault();
        var dataen = $("#form").serialize() + "&action";
        $.ajax({
            type:"POST",
            url:"modify_cbndtb.php",
            data: dataen,
            success:function (data) {

                $(function(){
                    var valData = data;

                    var valNew=valData.split(',');
                    for (i = 0; i < valNew.length; i++) {
                        valNew[i] = valNew[i];
                        $('#'+(i + 1)+'U').val(valNew[i]);
                    }
                });
           }
        });
    });
}); 
</script>