Question

我使用以下代码显示然后从Bootstrap模式中的数据库编辑记录（通过id）但是我似乎无法呈现正在编辑的记录的图像。其他一切都很好。

我的代码中是否缺少base64才能正常工作？或者是需要编辑的标签？ HTML dataType渲染图像正常......但我需要以json格式的响应。

<div id="add_data_Modal" class="modal fade">  
  <div class="modal-dialog">  
       <div class="modal-content">  
            <div class="modal-header">  
                 <button type="button" class="close" data-dismiss="modal">&times;</button>  
                 <h4 class="modal-title">PHP Ajax Update MySQL Data Through Bootstrap Modal</h4>  
            </div>  
            <div class="modal-body">  
                 <form method="post" id="insert_form">  
                      <img src="image" name="image" id="image" />
                      <label>Enter Employee Name</label>  
                      <input type="text" name="name" id="name" class="form-control" />  
                      <br />  
                      <label>Enter Employee Address</label>  
                      <textarea name="address" id="address" class="form-control"></textarea>  
                      <br />  
                      <label>Select Gender</label>  
                      <select name="gender" id="gender" class="form-control">  
                           <option value="Male">Male</option>  
                           <option value="Female">Female</option>  
                      </select>  
                      <br />  
                      <label>Enter Designation</label>  
                      <input type="text" name="designation" id="designation" class="form-control" />  
                      <br />  
                      <label>Enter Age</label>  
                      <input type="text" name="age" id="age" class="form-control" />  
                      <br />  
                      <input type="hidden" name="employee_id" id="employee_id" />  
                      <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />  
                 </form>  
            </div>  
            <div class="modal-footer">  
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
            </div>  
       </div>  
  </div>  
 </div>  

HERE IS JQUERY AJAX CALL TO PASS THE DATA:-

<script>  
     $(document).ready(function(){  
      $('#add').click(function(){  
           $('#insert').val("Insert");  
           $('#insert_form')[0].reset();  
      });  
      $(document).on('click', '.edit_data', function(){  
           var employee_id = $(this).attr("id");  
           $.ajax({  
                url:"fetch.php",  
                method:"POST",  
                data:{employee_id:employee_id},  
                dataType:"json",  
                success:function(data){  
                     $('#name').val(data.name);  
                     $('#address').val(data.address);  
                     $('#gender').val(data.gender);  
                     $('#designation').val(data.designation);  
                     $('#age').val(data.age);  
                     $('#employee_id').val(data.id);
                     $('#image').html(data.'<img src="data:image/png;base64,' + img  + '" />');  
                     $('#insert').val("Update");  
                     $('#add_data_Modal').modal('show');  
                }  
           });  
      });

获取代码

<?php  
//fetch.php  
$connect = mysqli_connect("localhost", "root", "", "testing");   
if(isset($_POST["employee_id"]))  
{  
  $query = "SELECT * FROM tbl_employee WHERE id = '".$_POST  ["employee_id"]."'";  
  $result = mysqli_query($connect, $query);  
  $row = mysqli_fetch_array($result);  
  echo json_encode($row);  
}  
?>

Answer 1

您正尝试将图片标记的html属性设置为图片标记。这毫无意义。如果它起作用，你最终会得到类似的东西：

<img><img src="..."></img>

相反，只需更新现有图片代码的src，如下所示：

$('#image').attr('src', 'data:image/png;base64,'+data.img);

在Bootstrap Modal中显示来自ajax json响应的图像

1 个答案: