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

时间:2018-01-12 04:42:23

标签: php jquery ajax

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

这是我的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-->

我需要从数据库中检索的数据显示在输入textarea中。最终目标是让用户编辑数据。

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

     $(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);
    ?>

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

2 个答案:

答案 0 :(得分:0)

我注意到你正在从数据库中检索数据作为一个数组,它可能被编码为json数组。尝试访问客户端上的数据,如下所示

data[0].category

答案 1 :(得分:0)

我设法解决了这个问题。感谢那些帮助过的人。

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