tải khung trang với Jquery AJAX

Question

Tôi muốn sử dụng $ .ajax() để yêu cầu một trang, nhưng chỉ tải các phần của trang đó. Tôi biết bạn có thể chỉ định những mảnh trang bạn muốn với .load() nhưng tôi đã tự hỏi nếu điều này là có thể với $ .ajax?

Answer 1

Bạn có thể nhận được đoạn của mình qua bài đăng, thêm html vào div với màn hình: none; Sau đó, sử dụng bộ chọn để lấy mảnh mà bạn muốn và nối nó vào vùng mà bạn muốn hiển thị.

Air Code:

<div id="tempRegion" style="display:none;"> 

</div> 

$.ajax({ 
    url: "page.htm", 
    type: "GET", 
    success: function(results){ 

     $('#tempRegion').html(results); 

     ... 

     // Now select fragment, append to display area 
     var fragement = $('#someFragment').html(); 

     $('#displayRegion').html(fragement); 

    }) 

}); 

Answer 2

Đối với những người bạn của những người đang tự hỏi, stoplion là đề cập đến tính năng này: Loading Page Fragments (di chuyển xuống trên trang):

Các .load (phương pháp) , không giống như $ .get(), cho phép chúng ta chỉ định một phần của tài liệu từ xa được chèn vào. Điều này đạt được với một cú pháp đặc biệt cho tham số url. Nếu một hoặc nhiều ký tự khoảng trắng được bao gồm trong chuỗi, phần của chuỗi sau dấu cách đầu tiên được giả định là bộ chọn jQuery xác định nội dung sẽ được tải.

Vì $ .get() dường như không hỗ trợ nó, tôi giả định rằng $ .ajax cũng vậy. Một cách đơn giản để thực hiện điều này sẽ là như sau:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
     $("#el").html($(data).find("#selector")); 
    }, 
    dataType: 'html' 
}); 

Đây sẽ là tương đương với

$("#el").load('http://example.com/page.html #selector'); 

Tuy nhiên, lưu ý rằng cú pháp đặc biệt ('#selector') có nghĩa là kịch bản có mặt trong HTML được tải sẽ không được thực hiện. Xem Script Execution trong tài liệu .load().

Answer 3

Các giải pháp dễ dàng với phương pháp tải:

$("#menu a").click(function(){ 
    event.preventDefault(); 
    $("#container").load(this.href + " #container p"); 
    return false; 
}); 

Chỉ sử dụng phương pháp Ajax cho các kịch bản phức tạp hơn như gửi bài hoặc nhận được từ một kịch bản PHP hoặc JSON tập tin nếu không nó sẽ làm chậm trang web của bạn.

Answer 4

Câu trả lời chính xác cho bạn là:

$.ajax({ 
    url: 'http://example.com/page.html', 
    data: {}, 
    success: function (data) { 
    $("#el").html($(data).append(data).find("#selector")); 
    }, 
    dataType: 'html' 
});