javascript - 如何使用 AJAX 从 php 获取值

Question

我想分别获取 2 个值，以便通过 AJAX 从 PHP 自动填充第一个文件中的输入，但是当我使用 console.log(data) 时，我获取了所有数据并且我想单独检索它为了把它放在不同的标签中

<input id="regist" type="text" name="regist" onblur="passdata();">
<input id="atyp" type="text" name="atyp" >
<input id="mtow" type="text" name="mtow" >

<script>
$(document).ready(function(){})

function passdata() {
    var regist = $('#regist').val();

    $.ajax({
        type: 'post',
        url: 'checkdb.php',
        data: 'regist='+regist,
        success: function(data){
            var atyp = $('#myvalue1').val();
            var mtow = $('#myvalue1').val();
            $('#atyp').text(atyp);
            $('#mtow').text(mtow);
            alert (aty+mtow);
            console.log(data);
        }
    })
}
</script>

和 PHP 文件....当然有数据库连接

$regist = $_POST['regist'];

$conn = mysqli_connect($host,$user,$pwd,$db);
$sql= ("SELECT * FROM aircrafts where regist='$regist'");
$datas = mysqli_query($conn,$sql);

foreach ($datas as $row) {};

if(mysqli_num_rows($datas) == 0) {
    echo 'non ce niente';
} else { ?>

    <span id="myvalue1"><?php echo $atyp =  $row['atyp'];?></span>
    <span id="myvalue2"><?php echo $atyp =  $row['mtow'];?></span>

<?php };

?>

Answer 1

将您的 Ajax 请求更改为:

$.ajax({
    type: 'post',
    url: 'checkdb.php',
    data: 'regist='+regist,
    dataType: 'json', // NEW LINE
    success: function(data) {
        //var atyp = $('#myvalue1').val();
        //var mtow = $('#myvalue1').val();
        //$('#atyp').text(atyp);
        //$('#mtow').text(mtow);
        var atyp = data.atyp;
        var mtow = data.mtow;
        alert ('aty: ' + aty , 'mtow: ' + mtow);
        console.log(data);
    }
})

并在您的 PHP 中:更改这些行

else{?>
<span id="myvalue1"><?php echo $atyp =  $row['atyp'];?></span>
<span id="myvalue2"><?php echo $atyp =  $row['mtow'];?></span>
<?php };

正好是这条线

else {
    echo json_encode( $row );
}

---

编辑

关于您的“DOM 事件”处理(“document onready”和“input#regist onblur”)我建议这样做。

HTML:

<!-- <input id="regist" type="text" name="regist" onblur="passdata();"> -->
<input id="regist" type="text" name="regist">
<input id="atyp" type="text" name="atyp">
<input id="mtow" type="text" name="mtow">

JavaScript:

function passdata(event) {
    $.ajax({
        type: 'post',
        url: 'checkdb.php',
        data: 'regist=' + $(event.target).val(),
        dataType: 'json',
        success: function(data){
            console.log(data);
        }
    })
}

$(document).ready(function(){
    // on blur event
    $('#regist').on('blur', passdata)
    // on input event | maybe this would be also an interesting option as it fires immidiately on input
    // $('#regist').on('input', passdata)
})

此 Bootstrap 将逻辑与标记分开，这通常是一种很好的做法。