Поиск элемента по идентификатору в ответе AJAX с помощью jQuery

Мне нужно отправить данные на страницу php, а затем я хотел бы получить текст определенного div, который находится в ответе, но я не могу правильно настроить порядок. Я не слишком хорош с jQuery, но я обычно могу разобраться с вещами довольно быстро... Я был на этом минутку и пробовал все, что нашел... Я думаю, что просто не хватает правильной комбинации вещей,

$.post("process.php", data , function (response) {  

       var w = window.open();    

       $(w.document.body).html(response); 

       console.log(typeof response); //  yeilds string 
       //create jquery object from the response html
       // var $data = $(response);   // yeilds Uncaught Error: Syntax error, unrecognized expression: + whole html text


       var success =  $($.parseHTML(response)).find("#success"); 
       console.log('success'); 
       console.log(success);        // see screenshot
       console.log(success.text()); // yields nothing 
       console.log(success.val());  // yields undefined 
       // if (window.focus) {w.focus()}; 

 },'html');

это результат console.log(success);, а красное поле - это то, что я хочу от ответа...

! [эта картина кажется очень крошечной... это было не так уж крошечно, когда я это сделал. Я надеюсь, что он все еще доступен для чтения] [1]

и это делает следующее:

var success =  $(response).find("#success"); 
console.log('success'); 
console.log(success);        // yeilds Uncaught Error: Syntax error, unrecognized expression: + whole html text in red

Ответ...

<html><head>
   <style>

      div.totals {
          font-family:calibri; font-size:.9em;  display:inline-block; 
          border-width: 2px;  border-style: solid; border-color: #FFD324; 
          background-color: #FAF5D7; color: #514721; 
          width: 500px; 
          }

      div.error_invalid {
         font-family:calibri; font-size:.9em;  display:inline-block; 
         border-width: 2px; border-style: solid; border-color: #9999CC; 
         background-color: #EEEEFF; color: #7979B8; 
     }

    </style>
    </head>
    <body>
    <div class="totals">Total new rows added: 0 out of 0<br/></div>
    <br/><br/>
    <div class="totals">Total updated rows: 0 out of 0 <br/></div>

    <div id="success">true</div>
    </body></html>

И я попытался удалить часть стиля, и я добавил в теги html, head и body в надежде, что это поможет.... что означает, что у меня такие же проблемы, если ответ состоит только из трех разделов.

Ответы

Ответ 1

Обратите внимание, что все элементы находятся на одном уровне? Вам нужно использовать .filter(), чтобы сузить текущий выбор до одного элемента в этом выборе, .find() будет вместо этого смотреть потомки текущего выбора.

var success =  $($.parseHTML(response)).filter("#success"); 
console.log(success); // div#success

Ответ 2

Я получил полную "html" страницу, возвращенную ajax, но мне нужно только частичное ее содержимое, которое обернуто div, а также мне нужно выполнить script на странице "html".

 $.ajax ({
  type: "POST",
  url : "contact.php",
  data: $("#formContactUs").serialize(),
  success: function(msg){
    console.log($(msg)); // this would returned as an array
    console.log(msg);    // return whole html page as string '<html><body>...</body></html>'
    $('#id').html($(content).closest('.target-class'));
    $('#id').append($(content).closest('script')[0]);  // append and execute first script found, when there is more than one script.
  }
});

Ответ @kevin дал подсказки, почему find() работает не так, как ожидалось, поскольку он выбирает только его потомков, но не первый рассматриваемый элемент. Помимо использования фильтра, $.closest() также работает, если текущий элемент - это то, что вы ищете. Ну, вероятно, этот пост, очень похожий на @Kevin, отвечает, просто предложит другой альтернативный ответ и дал более подробную информацию, которая, надеюсь, сделает вещи более ясными.