2013-04-26 30 views
20

Tôi cần đăng dữ liệu lên trang php và sau đó tôi muốn nhận được văn bản của một div nhất định trong phản hồi nhưng dường như tôi không thể đặt những thứ lên một cách chính xác. Tôi không quá tốt với jQuery nhưng tôi thường có thể tìm ra những thứ khá nhanh ... Tôi đã ở đây một chút và đã thử tất cả mọi thứ tôi đã tìm thấy ... Tôi nghĩ rằng tôi chỉ thiếu sự kết hợp của các công cụ .Tìm một phần tử bằng ID trong một phản ứng AJAX với 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'); 

này là sản phẩm của console.log(success); và hộp màu đỏ là những gì tôi muốn từ phản ứng ...

! [Hình ảnh này có vẻ thực sự nhỏ ... nó không phải là nhỏ khi tôi thực hiện nó. Tôi hy vọng nó vẫn còn có thể đọc được] [1]

và điều này rằng:

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

đáp ứng là ...

<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> 

Và tôi đã cố gắng loại bỏ các phần phong cách và tôi thêm vào trong các thẻ html, head và body trong hy vọng rằng nó sẽ giúp .... ý nghĩa, tôi có cùng một vấn đề nếu đáp ứng chỉ bao gồm ba div.

+0

Có thể hiển thị nội dung 'respone' – pktangyue

+0

vâng. Tôi đã không chắc chắn nếu nó là cần thiết vì những gì nó đã cho tôi trong ảnh chụp màn hình dường như được giải thích một cách chính xác vào thời điểm đó. –

+0

Bạn đã thử '$ (w.document.body) .find ('# success')'? – pktangyue

Trả lời

31

Lưu ý cách tất cả các phần tử trên cùng một cấp độ ? Bạn cần sử dụng .filter() để thu hẹp lựa chọn hiện tại thành một phần tử trong lựa chọn đó, thay vào đó, .find() sẽ xem xét hậu duệ của lựa chọn hiện tại.

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

cảm ơn. bạn có thể cho tôi biết tại sao ... đôi khi ... (khi tôi googled vấn đề này) ... họ nói để làm '$ (phản ứng)' và lần khác '$ ($. parseHTML (response))' –

+3

$ .parseHTML là một phương pháp mới được thêm vào trong 1.8 chỉ để phân tích cú pháp html, Nó an toàn hơn để sử dụng $ .parseHTML, nó giải quyết một rò rỉ bộ nhớ trong một số trường hợp cạnh trong IE10, tôi không chắc chắn những gì khác nó giúp với. –

+1

jQuery 1.9 đã thay đổi cách xử lý HTML từ ajax. Cụ thể, không gian trắng hàng đầu không được phép. Xem https://github.com/jquery/jquery-migrate/blob/master/warnings.md để biết chi tiết. –

2

Tôi có một trang 'html' đầy đủ được trả về bởi ajax, nhưng tôi chỉ cần một phần nội dung của nó, được bao bọc bởi div và tôi cũng cần thực thi tập lệnh bên trong trang '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 trả lời đã đưa ra gợi ý cho biết tại sao find() không hoạt động như mong đợi, vì nó chỉ chọn hậu duệ của nó chứ không phải yếu tố đầu tiên đang được xem xét. Bên cạnh việc sử dụng bộ lọc, $ .closest() cũng hoạt động nếu phần tử hiện tại là những gì bạn đang tìm kiếm. Vâng, có lẽ bài đăng này khá giống với câu trả lời của @ Kevin, nó chỉ là để đề xuất một câu trả lời thay thế và đưa ra thêm chi tiết mà hy vọng làm cho điều rõ ràng hơn.

Các vấn đề liên quan