使用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 而不是數組。