从引导模式中的ajax json响应显示图像

我正在使用以下代码来显示并编辑记录（通过id）从引导模式中的数据库中，但我似乎无法呈现记录的图像正在编辑。其他一切工作正常。从引导模式中的ajax json响应显示图像

有没有从我的代码中缺少的base64正常工作？或者是需要编辑的标签？ HTML数据类型呈现图像很好......但我需要以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> 
<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); 
} 
?>

来源

2017-07-31 Tatters

你需要显示为fetch.php的代码，可能你需要echo json_encode（$ dataFromBaze） – Zeljka

你能看到来自ajax的“网络”响应吗？有什么，错误或什么？ – Zeljka

我不认为有任何错误？目前无法测试...它看起来可能是$（'＃image'）。html（data。''）;那就是问题所在。 – Tatters

您正在尝试的图像标签的HTML属性设置为图像标记。这完全没有意义。如果是工作，你最终会喜欢的东西：

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

相反，只更新到你这样的现有的图像标记的src：

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

来源

2017-07-31 11:07:50

啊......谢谢。我的错误...今晚我会放弃它。 – Tatters

-1

你犯了一个错误，“类型“丢失：

<script type="text/javascript"> 

</script>

希望能够解决这个问题。

来源

2017-07-31 11:26:03

任何投票的理由？ –

从引导模式中的ajax json响应显示图像

回答

相关问题