从引导模式中的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">×</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);
}
?>
答
您正在尝试的图像标签的HTML属性设置为图像标记。这完全没有意义。如果是工作,你最终会喜欢的东西:
<img><img src="..."></img>
相反,只更新到你这样的现有的图像标记的src:
$('#image').attr('src', 'data:image/png;base64,'+data.img);
+0
啊......谢谢。我的错误...今晚我会放弃它。 – Tatters
答
你犯了一个错误,“类型“丢失:
<script type="text/javascript">
</script>
希望能够解决这个问题。
+0
任何投票的理由? –
你需要显示为fetch.php的代码,可能你需要echo json_encode($ dataFromBaze) – Zeljka
你能看到来自ajax的“网络”响应吗?有什么,错误或什么? – Zeljka
我不认为有任何错误?目前无法测试...它看起来可能是$('#image')。html(data。'');那就是问题所在。 – Tatters