Thử ngỏ gửi đến các doanh nghiệp có nhu cầu tuyển dụng - Tuyển thành viên cho nhóm QHO Researcher - 2012 - Về việc gởi câu hỏi trợ giúp trên diễn đàn -
+ Trả lời bài viết
Trang 1/3 1 2 3 CuốiCuối
Hiện kết quả từ 1 tới 10 của 21

Chủ đề: Hướng dẫn sử dụng jquery ajax lồng nhau trong ứng dụng

  1. #1
    Administrator Avatar của Kenny
    Tham gia ngày
    May 2008
    Đến từ
    HCMC
    Bài gửi
    977
    Points
    3.157
    Credits
    310
    Like
    307
    Được Like 1.422 lần trong 326 bài viết

    Mặc định Hướng dẫn sử dụng jquery ajax lồng nhau trong ứng dụng

    Thời gian qua, tôi nhận được rất nhiều câu hỏi về việc sử dụng jquery ajax lồng nhau bị lỗi. Vì thế trong bài này, tôi sẽ hướng dẫn các bạn khắc phục lỗi đó.

    Ví dụ của tôi đơn giản như sau:
    Có 3 liên kết. Khi click vào 1 liên kết thì sẽ xuất ra 1 nút nhấn. Nhấn tiếp vào nút đó thì sẽ ra 1 câu thông báo nào đó.

    Phân tích:
    Như vậy, để thực hiện thao tác này ta phải làm 2 hành động. 1 là bắt sự kiện khi click vào link. Và 2 là khi click xong sẽ xuất hiện nút, và nhấn tiếp nút thì sẽ thông báo một thông tin gì đó.

    Để thực hiện ta làm như sau:


    Tạo file test.html với nội dung sau:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function(){
    	$("a.link").click(function(){
    		id=this.getAttribute("id");
    		$.ajax({
    			type:"get",
    			url:"check.php",
    			data:"id="+id,
    			async:false,
    			success:function(kq){
    				$("#ketqua").html(kq);
    			}
    		})
    		$(":button").click(function(){
    			id=this.getAttribute("id");
    			alert("QHOnline.Info - Your link : "+id);
    		})
    	})
    })
    </script>
    </head>
    
    <body>
    	<a href='#' class="link" id="1">Link 1</a> 
    	<a href='#' class="link" id="2">Link 2</a> 
    	<a href='#' class="link" id="3">Link 3</a> 
        <div id="ketqua"></div>
    </body>
    </html>
    Tạo file check.php với nội dung như sau:

    PHP Code:
    <?php
    $id
    =$_GET['id'];
    echo 
    "<button class='click' id='$id'>Click Me Link $id</button>";
    ?>
    Giải thích:
    Để gọi jquery ajax lồng nhau, thì chúng ta phải cho dữ liệu load trên môi trường đồng bộ. Vì sự kiện button chỉ xuất hiện khi chúng ta click vào liên kết. Do vậy, nếu các bạn để async:true. Thì dữ liệu load bất đồng bộ. Và dĩ nhiên sự kiện ở dưới sẽ gọi đồng thời mặc cho ajax muốn làm gì thì làm.

    Kế tới, sự kiện click vào nút button nó có được khi nào ?. Nó có được khi người dùng click vào link. Vì thế. Sự kiện nút button phải nằm trong sự kiện click vào link đầu tiên. Nếu đặt ở bên ngoài sự kiện click link thì nó sẽ không tìm thấy được :button. Vì mới mở ra làm gì có :button cho jquery quét dữ liệu.

    Vậy tổng kết lại:
    Để sử dụng jquery ajax lồng nhau ta cần chú ý:
    + Dữ liệu load phải đồng bộ. Nghĩa là các sự kiện phải đợi nhau.
    + Các sự kiện phải lồng trong nhau, chứ không đứng độc lập ở bên ngoài.

    Hy vọng, sẽ giúp các bạn giải quyết vấn đề mà các bạn đang gặp phải.

    Good Luck.
    Lần sửa cuối bởi Kenny; 02-21-2012 lúc 08:03 AM
    Bạn nên :

    + Nên sử dụng Tag [Help] khi bạn đặt câu hỏi.
    + Tìm kiếm trước khi hỏi một vấn đề nào đó.
    + Khi có vấn đề về code, hãy lập chủ đề và đưa code của bạn lên forum.
    + Nên viết có dấu khi tiến hành gửi bài viết trên diễn đàn.

  2. Hiện có 9 thành viên Like bài viết của Kenny:

    bi.young (02-21-2012), kennyfans (02-21-2012), nobitacnt (02-21-2012), phongcodon (02-22-2012), quangteo (02-22-2012), saccly (08-31-2012), tindecken (02-24-2012), xuannamquach (05-15-2013)

  3. #2
    QHO Researcher Avatar của nobitacnt
    Tham gia ngày
    Mar 2011
    Bài gửi
    391
    Points
    494
    Credits
    0
    Like
    208
    Được Like 164 lần trong 89 bài viết

    Mặc định

    Em cũng hay làm theo cách trên như của thầy.
    ---Qua bài này cho em hỏi :
    1 ) Em toàn sử dụng jquery để giải quyết vấn đề liên quan đến ajax vì quen rồi và cũng cho kết quả như mong muốn,vậy cho hỏi nó có khác gì khi sử dụng ajax thuần và xml không?
    2 ) Sử dụng ajax có nhiều lợi ích nhưng ngoài ra nó có hạn chế gì và cách khắc phục là gì? theo e biết thì sử dụng ajax không thể back lại trang trước được ai biết cách sử dụng ajax mà vẫn back lại xem trước vừa xem được không?

    To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
    từ cơ bản tới nâng cao - Hướng dẫn làm website bán hàng và thanh toán trực tuyến tại
    To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

  4. #3
    QHO Researcher Avatar của alicuche
    Tham gia ngày
    Dec 2011
    Đến từ
    HCM
    Bài gửi
    199
    Points
    465
    Credits
    0
    Like
    67
    Được Like 137 lần trong 64 bài viết

    Mặc định

    mình thấy ajax mà có thể back lại trang thì mỗi lần nhấn link trên thanh address sẽ có thêm một đoạn #abc ở phía sau, chỉ biết vậy thôi chứ chưa tìm hiểu :)

  5. #4
    QHO Researcher Avatar của quangteo
    Tham gia ngày
    Feb 2012
    Đến từ
    Đồng Nai
    Bài gửi
    121
    Points
    360
    Credits
    100
    Like
    213
    Được Like 55 lần trong 22 bài viết

    Mặc định

    Quote Nguyên văn bởi alicuche Xem bài viết
    mình thấy ajax mà có thể back lại trang thì mỗi lần nhấn link trên thanh address sẽ có thêm một đoạn #abc ở phía sau, chỉ biết vậy thôi chứ chưa tìm hiểu :)
    Đoạn #abc như bạn @alicuche nói đó là bookmark (cơ chế hoạt động giống như tạo mục lục trong MS Word).
    VD: Mình có đoạn code sau:
    <div id='abc'>
    ...
    Do sth here
    ...
    <div>
    <a href='#abc'>Go to abc</a>

    Thì khi bạn nhấn vào link 'Go to abc' thì browser sẽ dẫn bạn đến tag div chứa id='abc'
    Lần sửa cuối bởi quangteo; 02-21-2012 lúc 03:05 PM Lý do: diễn giải thêm

  6. #5
    Administrator Avatar của Kenny
    Tham gia ngày
    May 2008
    Đến từ
    HCMC
    Bài gửi
    977
    Points
    3.157
    Credits
    310
    Like
    307
    Được Like 1.422 lần trong 326 bài viết

    Mặc định

    Quote Nguyên văn bởi nobitacnt Xem bài viết
    Em cũng hay làm theo cách trên như của thầy.
    ---Qua bài này cho em hỏi :
    1 ) Em toàn sử dụng jquery để giải quyết vấn đề liên quan đến ajax vì quen rồi và cũng cho kết quả như mong muốn,vậy cho hỏi nó có khác gì khi sử dụng ajax thuần và xml không?
    2 ) Sử dụng ajax có nhiều lợi ích nhưng ngoài ra nó có hạn chế gì và cách khắc phục là gì? theo e biết thì sử dụng ajax không thể back lại trang trước được ai biết cách sử dụng ajax mà vẫn back lại xem trước vừa xem được không?
    1) Jquery ajax thật ra cũng chỉ là ajax thuần, nhưng được sự hỗ trợ của thư viện có sẵn. Thay vì ajax thuần ta phải viết từ A->Z để thao tác từ bước khởi tạo dữ liệu, đến tương tác trả kết quả. Thì jquery thay ta quét và dọn dữ liệu sẵn sàng cho mục đích của chúng ta. Nói cách khác, nó không khác gì so với các viết thông thường, điểm khác duy nhất là thao tác nhanh hơn vì không phải qua nhiều bước lằng nhằng. Nhưng nếu muốn xây dựng 1 ứng jquery lồng nhiều cấp thì nên viết được qua ajax thuần cho tốt. Vì khi sang jquery sẽ rất đơn giản và dễ phát triển. Vì bạn đã hiểu rõ vấn đề 1 cách tường tận.

    2) Lợi thế của ajax là tính tương tác cao và đánh lừa được cảm giác người dùng. Do nó không phải load lại cả website mà chỉ load trên 1 phân vùng nhỏ của ứng dụng. Điều này dẫn tới tăng tốc ứng dụng và tạo cảm giác nhanh trong quá trình sử dụng. Tuy nhiên, cũng vì nó load 1 phân vùng nên cũng làm cho bot của các bộ máy tìm kiếm không thể index được nội dung mà chúng ta mong muốn. Do load bất đồng bộ và phải có sự kiện tương tác thì dữ liệu mới thay đổi. Mà như thế thì bot có thông minh đến mấy cũng không thể bắt kịp tiến độ load của ajax. Do đó mà chúng ta có thể thấy các trang báo điện tử, nếu muốn SEO thì không thể ứng dụng ajax quá nhiều là vì vậy.

    Vấn đề back trong ajax, cũng được mổ xẻ nhiều. Và cũng chưa có 1 giải pháp nào khắc phục 100% các trường hợp. Chỉ có thể giải quyết phần nào đó. Hãy nhìn xem Facebook, Gmail đôi khi còn không thể giải quyết được vấn đề back 100% thì nói gì đến chúng ta phải không nào !!!

    Quote Nguyên văn bởi quangteo Xem bài viết
    Đoạn #abc như bạn @alicuche nói đó là bookmark (cơ chế hoạt động giống như tạo mục lục trong MS Word).
    VD: Mình có đoạn code sau:
    <div id='abc'>
    ...
    Do sth here
    ...
    <div>
    <a href='#abc'>Go to abc</a>

    Thì khi bạn nhấn vào link 'Go to abc' thì browser sẽ dẫn bạn đến tag div chứa id='abc'
    Bookmark là phương pháp tạo vùng liên kết tạm trong 1 trang. Và không phải dùng id như ở trên bạn nhé.
    Để dùng bookmark ta sử dụng như sau:
    Vùng dữ liệu này muốn khi click nó đẩy tới ta quy ước như sau:
    HTML Code:
    <a href='#' name='Tên_Vùng'>1 tiêu đề chẳng hạn</a>
    Ở các link kết ta gọi vùng ở trên bằng cách:
    HTML Code:
    <a href='#Tên_Vùng'>Click Me</a>
    Vậy khi người dùng nhấn vào click me. Trang sẽ được đẩy lên vùng tiêu đề ở trên một cách đơn giản
    Bạn nên :

    + Nên sử dụng Tag [Help] khi bạn đặt câu hỏi.
    + Tìm kiếm trước khi hỏi một vấn đề nào đó.
    + Khi có vấn đề về code, hãy lập chủ đề và đưa code của bạn lên forum.
    + Nên viết có dấu khi tiến hành gửi bài viết trên diễn đàn.

  7. Các thành viên Like bài viết của Kenny:

    quangteo (02-21-2012)

  8. #6
    QHO Researcher Avatar của nobitacnt
    Tham gia ngày
    Mar 2011
    Bài gửi
    391
    Points
    494
    Credits
    0
    Like
    208
    Được Like 164 lần trong 89 bài viết

    Mặc định

    Cảm ơn thầy rất nhiều,vì hôm trước có người hỏi e thế e cũng trả lời như thầy nhưng tới câu hỏi cách khác phục back lại trang trước thì chưa biết ^^

    To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.
    từ cơ bản tới nâng cao - Hướng dẫn làm website bán hàng và thanh toán trực tuyến tại
    To view links or images in signatures your post count must be 10 or greater. You currently have 0 posts.

  9. #7
    QHO Researcher Avatar của bi.young
    Tham gia ngày
    Jun 2011
    Bài gửi
    107
    Points
    389
    Credits
    50
    Like
    105
    Được Like 62 lần trong 28 bài viết

    Mặc định

    cám ơn thầy. e sẽ nghiên cứu lại hoàn thành bài trainning jquery :D

  10. Các thành viên Like bài viết của bi.young:

    quangteo (02-22-2012)

  11. #8
    QHO Researcher Avatar của quangteo
    Tham gia ngày
    Feb 2012
    Đến từ
    Đồng Nai
    Bài gửi
    121
    Points
    360
    Credits
    100
    Like
    213
    Được Like 55 lần trong 22 bài viết

    Mặc định

    Cám ơn Thầy đã sửa sai dùm em.

    Đúng là phải:
    <a href='#' name='Tên_Vùng'>1 tiêu đề chẳng hạn</a>
    <a href='#Tên_Vùng'>Click Me</a>

    Khi làm mini project ajax em lại sai khi sử dụng:
    <div id='Tên_Vùng'>
    ...
    </div>
    <a href='#Tên_Vùng'>Click Me</a>

    Bookmark vẫn chạy bình thường, nhưng dù gì cũng là sai cú pháp. Em sẽ lưu ý hơn.

  12. #9
    QHO Researcher Avatar của quangteo
    Tham gia ngày
    Feb 2012
    Đến từ
    Đồng Nai
    Bài gửi
    121
    Points
    360
    Credits
    100
    Like
    213
    Được Like 55 lần trong 22 bài viết

    Mặc định

    Cám ơn Thầy, em sẽ sớm hoàn thành bài mini project về Jquery.

  13. #10
    AntjGjrl
    Guest Avatar của AntjGjrl

    Mặc định

    Vấn đề này chỉ cần thêm sự kiện live vào là có thể hoạt động bình thường dù đoạn jquery nằm bất cứ chỗ nào.

    CODE trên mình xin mạn phép edit lại như sau:

    HTML Code:
    <script>
    $(document).ready(function(){
    	$('a.link').click(function(){
    		$.ajax({
    			type:'get',
    			url:'check.php',
    			data:'id='+$(this).attr('id'),
    			async:false,
    			success:function(kq){
    				$('#ketqua').html(kq);
    			}
    		});
    	});
    	$('button').live('click',function(){
    		alert('QHOnline.Info - Your link : '+$(this).attr('id'));
    	});
    });
    </script>
    Với đoạn js này bạn sẽ thấy nó vẫn hoạt động bình thường, nhưng điểm khác là sự kiện click button không cần thiết phải nằm trong sự kiện click link

  14. Hiện có 3 thành viên Like bài viết của AntjGjrl:

    bi.young (02-27-2012), Kenny (02-22-2012), quangteo (02-23-2012)

+ Trả lời bài viết
  • Chủ đề tương tự

    1. Trả lời: 21
      Bài cuối: 07-22-2013, 12:53 PM
    2. Thắc mắc về async trong ajax và jquery
      By chidori in forum Hỏi Đáp - Thắc Mắc
      Trả lời: 9
      Bài cuối: 12-20-2012, 12:46 PM
    3. Hoỉ về hàm ajax trong jquery và ajax
      By nobitacnt in forum Kiến thức chung
      Trả lời: 6
      Bài cuối: 07-20-2012, 08:23 AM
    4. Thắc mắc về vấn đề đường dẫn trong ajax
      By nguyentienst in forum Hỏi Đáp - Thắc Mắc
      Trả lời: 5
      Bài cuối: 04-26-2011, 03:15 PM
    5. Hướng dẫn sử dụng xml và ajax trong ci ?
      By duongduythao in forum Hỏi đáp chung
      Trả lời: 8
      Bài cuối: 11-12-2010, 01:14 PM

    Tags for this Thread

    Quyền viết bài

    • Bạn không thể gửi chủ đề mới
    • Bạn không thể gửi trả lời
    • Bạn không thể gửi file đính kèm
    • Bạn không thể sửa bài viết của mình

    Lap Trinh PHP Can Ban - Lap Trinh PHP Nang Cao - Hoc PHP - PHP MYSQL Online - PHP Framework - Dao Tao PHP - Hoc PHP O Dau
    CakePHP Framework - Zend Framework - Hoc Zend Framework - CodeIgniter Framework -