javascript - 将两个变量从 onClick 上的另一个 php 返回到两个不同的 div

Question

这是 Index.php 文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="submit.js"></script>

<div class="container-fluid">
    <div class="row" id="formsett">

        <div class="col-sm-4"> 
            <div id="div1">
            </div>
        </div>

        <div class="col-sm-4">
            <div id="idform">
                <form id="idform" method="POST">
                <p>
                    <label> <b> Enter NIC No: </b> </label> <br/>
                    <input type="text" id="idno" name="idno" />
                </p>
                <p>
                    <input type="button" id="btn" onclick="SubmitFormData();" value="Submit" />
                </p>
                </form>
            </div>
        </div>

        <div class="col-sm-4">
            <div id="div2">
            </div>
        </div>
    </div>
</div>

这是 Submit.php 文件

$idno = ($_POST['idno']);
$gen='';
$img='';

if($idno>=12345){
    $gen="ABC";
    $img="<img src= 'abc.jpg'>";
}else{
    $gen="DEF";
    $img="<img src= 'def.jpg'>";
}

echo "$img";
echo "$gen";

这是 Submit.js 文件

function SubmitFormData() {
    var idno = $("#idno").val();
    $.post("submit.php", { idno: idno },
        function(data) {
             $('#div1').html(data);
        });
}

我想在不刷新 Index.php 页面的情况下单击按钮时看到 Div1 中的 $gen 值和 Div2 中的 $img 值。

现在，使用这个 Js 代码，我可以在同一个 div 中看到 $gen 和 $img 值。我通过更改此 js 代码和 submit.php 代码尝试了很多次，但没有成功。

如何将这两个值分成两个 div？

Answer 1

有一些方法可以使它更干净，但我会选择侵入性最小的方法:

在 Submit.php 中

...
echo $img . ";" . $gen;

在 Submit.js 中

function(data) {
  var responseArray = data.split(";");
  $('#div1').html(responseArray[0]);
  $('#div2').html(responseArray[1]);
});