2013-04-26 2 views
20

Мне нужно отправить данные на php-страницу, а затем я хотел бы получить текст определенного div, который находится в ответе, но я не могу показаться установленным все правильно. Я не слишком хорош с jQuery, но я обычно могу разобраться с вещами довольно быстро ... Я был на этом минутку и пробовал все, что нашел ... Я думаю, что просто не хватает правильной комбинации вещей ,Поиск элемента по ID в ответе AJAX с помощью 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 

Response является ...

<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 в надежде на то, что это поможет ... То есть, у меня такие же проблемы, если ответ состоит только из трех div.

+0

Может показывать содержимое 'respone' – pktangyue

+0

да. Я не был уверен, что это необходимо, так как то, что оно дало мне на скриншоте, казалось, было правильно интерпретировано в этот момент. –

+0

Вы пробовали '$ (w.document.body) .find ('# success')'? – pktangyue

ответ

31

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

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

спасибо. вы можете сказать мне, почему ... иногда ... (когда я искал эту проблему) ... говорят, что они делают '$ (ответ)' и другие времена '$ ($. parseHTML (response))' –

+3

$ .parseHTML это новый метод, добавленный в 1.8 только для разбора html. Безопаснее использовать $ .parseHTML, он решает проблему утечки памяти в некоторых случаях в IE10, я не уверен, с чем еще это помогает. –

+1

jQuery 1.9 изменил способ обработки HTML из ajax. А именно, ведущие пробелы не допускаются. Подробнее см. Https://github.com/jquery/jquery-migrate/blob/master/warnings.md. –

2

Я получил полную страницу «HTML», возвращенное Ajax, но мне нужно лишь частичное его содержания, который обернут в DIV, а также мне нужно выполнить скрипт внутри страницы «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 ответ дал намеки на то, почему найти() не работает, как ожидалось, так как он только выбрать его потомка, но не первый элемент в стадии рассмотрения. Помимо использования фильтра, $ .closest() также работает, если текущий элемент - это то, что вы ищете. Ну, вероятно, этот пост, очень похожий на ответ @ Кевина, просто предлагает другой альтернативный ответ и дал более подробную информацию, которая, надеюсь, сделает вещи более ясными.

Смежные вопросы