Question

我是编码javascript / ajax的初学者。我有一个ajax为我在学校的项目收集工人照片。现在我想通过javascript在<output="list"></output> HTML标记内显示我的照片。我已经从我的数据库获得了值，但我的问题是使用javascript将值放在输出标记内。

这是我做的：

function edit_emp(id){        
        save_method = 'update';
        $('#form')[0].reset(); 
        $('.form-group').removeClass('has-error');  
        $('.help-block').empty(); 
        $.ajax({
            url : "<?php echo site_url('HumanE/ajax_edit/')?>" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data){
                document.createElement('span');
                span.innerHTML = ['<img class="thumb" src="'+data.worker_photo+'"'];
                document.getElementById('list').insertBefore(span, null);               
                $('#modal_form').modal('show'); 
                $('.modal-title').text('Edit Employee details'); 
            },
            error: function (jqXHR, textStatus, errorThrown){
                new PNotify({
                    title: 'Error!',
                    text: 'A process cannot get through. Please consult your admin.',
                    type: 'error',
                    styling: 'bootstrap3'
                });
            }
        });
    }

以下是我的输出标记的完整代码：

<div class="col-sm-6 col-sm-offset-1">
  <label for="supid">Employee Picture</label>
  <output id="list"></output>
  <div class="upimage">
     <input class="form-control" required type="file" id="file" name="file"/>      
  </div>                                
 </div>

Answer 1

不是创建跨度然后插入元素，而是尝试以下作为成功函数：

 success: function(data){
    var output_list = document.getElementById('list');
    var img_elem = document.createElement("img");
    img_elem.classList.add("thumb");
    img_elem.src = data.worker_photo;
    output_list.appendChild(img_elem);
    $('#modal_form').modal('show'); 
    $('.modal-title').text('Edit Employee details'); 
 }

Answer 2

试试这个

const img = document.createElement("img");
img.classList.add("thumb");
img.src = data.worker_photo;
// If you want to clear the span first
span.innerHTML = "";
span.appendChild(img.cloneNode(true));

Answer 3

var ImageHTML = '< img class="thumb" src="'+data.worker_photo+'" >';

$('#list').html(ImageHTML);

图片无法在javascript

3 个答案: