javascript - 从一个表单字段获取条目并在数据库中搜索其相应数据并自动填充表单中的其他字段

Question

我正在编写一段用于计费的代码，在其中而不是通过键入来输入每个条目，我想做一些事情，例如如果记录已经存在，则输入一个字段，其他相应字段将自动填充相应的数据。例如:在我的表单中，有一个部分用于显示客户信息，这是通过输入 customer_id 来完成的，然后 PHP 文件会获取与输入的 customer_id 相对应的姓名、地址、电话号码和其他数据，并自动填充表单的其他客户字段。HTML 表单

<form action="./manipulate/invoice.php" method="post" accept-charset="UTF-8">
<div style="width:15%;float:left">
Customer #
<br>
<input id="searchbox" style="width:98%;margin-left:1%;margin:right:1%" name="cust_id" type="text" placeholder="Customer ID">
</div>
<div class="w3-container">
<div style="width:100%;">
<h4>Contact Info About Customer</h4>

</div>

<div style="width:30%;float:left" >
<input id="cust_address" style="width:98%;margin-left:1%;margin:right:1%" type="text" placeholder="Customer_Address" >
</div>

<div style="width:15%;float:left">
<input style="width:98%;margin-left:1%;margin:right:1%" type="text" placeholder="City" id="cust_city">
</div>

<div style="width:15%;float:left">
<input style="width:98%;margin-left:1%;margin:right:1%" type="text" placeholder="State" id="cust_state">
</div>

<div style="width:15%;float:left">
<input style="width:98%;margin-left:1%;margin:right:1%" type="number" placeholder="Pincode" id="cust_pincode">
</div>

<div style="width:25%;float:left">
<input style="width:98%;margin-left:1%;margin:right:1%" type="number" placeholder="Phone Number"  id="cust_phone">
</div>
</div>
</form>

Javascript函数:

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

        function trial(s){
        $('#searchbox').val(s);
        $.ajax({
            url:'./manipulate/get_addre.php',
            type:'POST',
            data:'cust_id='+s,
            dataType:'json',
            success:function(e){
                //$('#cust_add').append(e['address']);
                $('#cust_Address').val(e['address']);
                $('#cust_city').val(e['city']);
                $('#cust_state').val(e['state']);
                $('#cust_pincode').val(e['pincode']);
                $('#cust_phone').val(e['phone']);
                $('#cust_Name').val(e['name']);
                }

        });
    }
  });
$('#searchbox').change(function() {
    trail($(this).val());
});
</script>

get_addre.php 是

<?php

$mysqli = new mysqli("localhost","root","","tssolutions");

if($mysqli->connect_errno){
    echo "connection failed : $mysqli->connect_errno";
    exit();
}
$cust_id = $_POST['cust_name'];
$query = "SELECT * FROM customer WHERE customerid = '".$cust_id."' ";
//echo 'hi';
if($result = $mysqli->query($query)){
    /* fetch details*/
    while($row = $result->fetch_assoc()){
        $json = json_encode($row);
        //return $json;
        echo $json;
        //echo "<b>Address : </b>".$row['address'].", ".$row['city'].", ".$row['state'].", ".$row['pincode'].", contact no. ".$row['phone'];
    }
    $result->free();
}
$mysqli->close();

?>

在invoice.php中，这些字段和更多字段被插入到数据库中的另一个表中。我面临的问题是每当我进入表单中的 customer_id 字段时，所有字段都保持空白，本应自动填充。任何人都可以纠正它吗？提前致谢。

Answer 1

我要说的第一件事是:你的代码很容易受到 SQL 注入(inject)攻击。您应该更改此行:

$cust_id = $_POST['cust_name'];

到这一行:

$cust_id = $mysqli->real_escape_string($_POST['cust_name']);

乍一看，我没有看到任何错误，但奇怪的是没有事件处理程序，它会实际调用您的 JavaScript 试用函数。您似乎缺少这部分代码:

$('#searchbox').change(function() {
    trial($(this).val());
});

编辑重建您的应用程序后，我发现了您的错误。您正在发送名称为“cust_id”的数据，但正在请求名称为“cust_name”的数据。一旦您将名称更改为正确的名称，此操作就会起作用。

您可以使用 Web 开发人员控制台(Chrome 和 Firefox 中的 F12)在 newtwork 选项卡中查看服务器对 ajax 调用的响应。