Как получить определенный элемент в ответ на запрос Ajax

Question

Код в моем php-файле содержит много html-элементов, которые я получаю в ответе AJAX.В настоящее время он возвращает все элементы HTML в моей области перетаскивания.Как я могу прочитать только один элемент, т.е. img следующим образом:

Php код:

<img src="<?php echo $target_file; ?>">
<a target="_blank" href="<?php echo $target_file?>" >
<img src= "<?php echo $target_file?>" alt="Image not found" style="width:150px">
</a>
<p align = "center"><b> EXIF INFORMATION </b></p>

JS файл:

function uploadFormData(formData) 
{
  $.ajax({
    url: "upload.php",
    type: "POST",
    data: formData,
    contentType:false,
    cache: false,
    processData: false,
    success: function(data){
      $('#drop-area').html(data);
    }
  });
}

Answer 1

Вы можете настроить свой успех AJAX, как показано ниже.Это немного переутомление, но вы получите желаемый результат.

success: function(data){
     $('#drop-area').html(data);

    // will remove all the elements after the first image element
    $('#drop-area').find('>img:nth-child(1)').nextAll().remove();

    // need to read the first image element then can use below code
    var $firstImgObj = $('#drop-area').find('>img:nth-child(1)');
}

Answer 2

Я думаю, что будет лучше вернуть json с информацией, которую вы хотите напечатать в формате html, и составить html в функции успеха javascript ajax, но вы можете работать с html dom следующим образом:

// Assuming you are using jQuery as $.ajax exists
var $data = $(data); // create a jquery element to search in dom
var $img = $(data.find("img:eq(1)")); // Get a reference to the img element at pos 1
... // work with element in normal jquery way

Надеюсь, это поможет