使用ajax和dataType：“json”从数据库中获取数据以html形式显示

Question

我一夜之间一直在尝试这个，但我似乎无法让它发挥作用。 我厌倦了各种方法来让从数据库中检索到的数据值显示在表单上，​​但似乎都不起作用。 当用户单击表格行时，他们应该能够看到他们为该特定行插入的数据值。 这基本上是一个数据库，用户可以在其中存储供应商详细信息并在需要时对其进行编辑。 现在我正在编辑部分。

这是我的 html 表单代码应该显示数据的位置。

 <div id="VendorTable" class="VendorTable">
 <div id="vendorformedit" class="vendorformedit" >
 <i class="fa fa-expand"></i>
 <form id="form" name="form" method="POST" action="updatevendorlist.php" >
    <div id="formparttwo" >
    <h3>Other Information</h3><hr>

    <label>Category:</label>
    <input type="text" name="category" id="category" /><br/>
    <label>Notes:</label>
    <input type="text" name="remarks" id="remarks" /><br/><br/>

    <h3>2nd Contact Person</h3><hr>
    <label>Contact Person 2:</label>
    <input type="text" name="contactPerson2" id="contactPerson2"><br/>
    <label>Contact Number 2:</label>
    <input type="text" name="contact2" id="contact2"/><br/>

    <button type="submit" form="form" value="Submit"><i class="fa fa-plus-square fa-3x" aria-hidden="true"></i></button>
    </div> 

    <div id="formpartone">
    <h3>Vendor Details</h3><hr>

    <label>Vendor Name:</label>
    <input type="text" name="vendorName" id="vendorName"/><br/>
    <label>Vendor Address:</label>
    <input type="text" name="vendorAddress" id="vendorAddress"/><br/>
    <label>Vendor E-mail:</label>
    <input type="email" name="vendorEmail" id="vendorEmail"/><br/><br/>

    <h3>1st Contact Person</h3><hr>
    <label>Contact Person 1:</label>
    <input type="text" name="contactPerson1" id="contactPerson1" ><br/>
    <label>Contact Number 1:</label>
    <input type="text" name="contact1" id="contact1" /><br/>
    </div>
    </form>
</div><!--End vendorformedit Form-->
</div><!--End VendorTable Table-->

我需要从数据库中检索到的数据显示在输入文本区域中。 最终目的是让用户编辑数据。

这是使用 Ajax 和 dataType:Jason 的 javascript 代码

     $(document).on("click", ".individualrow", function(){ 
       var id=$(this).attr("vendor_id");  
       if(confirm("Are you sure you want to retrieve this?"))  
       {  confirm(id);
            $.ajax({ 
                method:"POST",   
                url:"retrievevendorlist.php",  
                data:{id:id},  
                dataType:"json",  
                success:function(data){ 
                 $('#category').val(data.category);  
                 $('#remarks').val(data.remarks);  
                 $('#contactPerson2').val(data.contactPerson2);  
                 $('#contact2').val(data.contact2);  
                 $('#vendorName').val(data.vendorName);  
                 $('#vendorAddress').val(data.vendorAddress);  
                 $('#vendorEmail').val(data.vendorEmail);  
                 $('#contactPerson1').val(data.contactPerson1);
                 $('#contact1').val(data.contact1); 

                 }  
            });  
            $(".individualrow").addClass("form_one");
            $(".vendorformedit").addClass("hide_form");
       }   
  });  

我正在尝试使用行 ID 从数据库中检索数据。 我相信代码在从retrievevendorlist.php 中检索数据方面工作成功。 但是它没有以 html 形式显示。

    <?php
    include("../LoginRegistrationSystem/connect.php");
    include("../LoginRegistrationSystem/functions.php");
    // attempt insert query execution
    if(isset($_POST['id'])){
    $sql = "SELECT * FROM vendor WHERE vendor_id = '".$_POST['id']."'";
    $result = mysqli_query($con, $sql);
    $row = mysqli_fetch_array($result);  
    echo json_encode($row);
    ?>

我不确定错误在哪里。 请帮我审查并告诉我哪里出错了。 提前谢谢你

Answer 1

我注意到您从数据库中检索数据作为一个数组，它可能被编码为一个 json 数组。 尝试访问客户端的数据如下

data[0].category

Answer 2

我设法解决了它。 感谢那些提供帮助的人。

我必须从数据库中拼出所有需要的数据，而且我使用了 accoc 而不是数组。