Load Trang Web Bằng Ajax Và JQuery - Thiết Kế Website

Đang tải dữ liệu...

Liên hệ Chính sách Khách hàng Giới thiệu Trang chủ Dịch vụ

• Thiết kế website
• Hosting
• Thiết kế đồ họa
• SEO tăng thứ hạng
• Nâng cấp website
• Dịch vụ nhập liệu
• Website cho điện thoại
• Tích hợp thanh toán trực tuyến
• Dịch vụ google cloud, ec2 cloud
• SEO tools
• Đọc tin Rss

Kiến thức cho bạn

• Trao đổi - học tập
  • Jquery (2)
  • NoSQL (4)
  • NodeJs (1)
  • Lập trình iOS (3)
  • Thủ thuật - kinh nghiệm (33)
  • Lập trình website (63)
  • Tối ưu hóa (11)
  • Mã nguồn (20)
  • SEO (35)
  • Bảo mật (9)
  • htaccess (5)
  • Ebook - tài liệu (4)
  • WYSIWYG (3)
  • Phần mềm (11)
  • Photoshop (5)
• Thư giản - giải trí
  • Sáng tạo (5)
  • Địa điểm vui chơi (5)
  • Quà tặng (2)
  • Truyện -hình vui (9)
  • Video clip (9)
  • Game (3)

Hỗ trợ trực tuyến Kỹ thuật : 098 7277 329 vfa.hoangnn - Mr. Hoàng Tư vấn : 090 282 4547 vfa.hoangnn - Mr. Hoàng Đối tác Mỹ phẩm The Face Shop Mã giảm giá - Code khuyến mãi Ốp lưng, Bao da Đẹp Giá vàng, giá USD Ốp lưng tự thiết kế Sep 16 Load trang web bằng ajax và jQuery 22:16 pm GMT +7 Hanoi | Trang chủ › Trao đổi - học tập › Lập trình website Thêm vào trang Google + Tutorial Ví dụ đơn giản load 1 trang web ajax với jQuery Web Development.Chi tiết hướng dẫn các hàm,cũng khá là đơn giản.Toàn bọ mã nguồn ở cuối bài viết

demo.html Tạo tập tin này với nội dung như bên dưới CODE<div id="rounded"> <img src="img/top_bg.gif" /><!-- image with rounded left and right top corners --> <div id="main" class="container"><!-- our main container element --> <h1>A simple AJAX driven jQuery website</h1> <!-- titles --> <h2>Because simpler is better</h2> <ul id="navigation"> <!-- the navigation menu --> <li><a href="#page1">Page 1</a></li> <!-- các nút bấm --> <li><a href="#page2">Page 2</a></li> <li><a href="#page3">Page 3</a></li> <li><a href="#page4">Page 4</a></li> <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li> <!-- hình trạng thái khi đang nạp ngầm --> </ul> <div class="clear"></div> <!-- the above links are floated - we have to use the clearfix hack --> <div id="pageContent"> <!-- Nội dung sau khi sử lý xong sẽ được đưa vào vùng này --> Hello, this is the default content </div> </div> <div class="clear"></div> <!-- chèn khoảng trống --> <img src="img/bottom_bg.gif" /> <!-- Kết thúc trang --> </div> Bên trên là đoạn mã với mục đích sẽ hiễn thị nội dung khi đã sử lý xong ra ngoài #page là những trang sẽ được nạp. việc này sẽ do javascript sử lý. bảo đảm khi xem trang web được liên tục. thay vì là các truy vấn ngầm sẽ ko được biểu diển trên url. người xem lúc mới truy cập website sẽ hiển thị 1 nội dung cố định. nhưng ở trường hợp này mỗi tham số #page sẽ đưa chính xác tới 1 trang xác định. tiện cho người dùng CSS CODEbody,h1,h2,h3,p,td,quote, small,form,input,ul,li,ol,label{ /* định dạng lại các thành phần chính của trang */ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; } body{ /* giao diện của body */ margin-top:20px; color:#51555C; font-size:13px; background-color:#123456; } .clear{ /* điều chỉnh đảo bảo xuống dòng ở nhiều trình duyệt */ clear:both; } a, a:visited { /* giao diện cho các link */ color:#007bc4; text-decoration:none; outline:none; } a:hover{ /* hiệu ứng khi đưa chuột vào */ text-decoration:underline; } #rounded{ /* div ngoài cùng của trang */ width:800px; margin:20px auto; /* canh giữa trang */ } .container{ /* this one contains our navigation, titles, and fetched content */ background-color:#FFFFFF; padding:10px 20px 20px 20px; } h1{ /* the heading */ font-size:28px; font-weight:bold; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; } h2{ /* the subheading */ font-weight:normal; font-size:20px; color:#999999; } ul{ /* the unordered list used in the navigation */ margin:30px 0px; } li{ /* we float the li-s, which contain our navigation links - we later apply clearfix */ list-style:none; display:block; float:left; width:70px; } li a,li a:visited{ /* the navigation links */ padding:5px 10px; text-align:center; background-color:#000033; color:white; -moz-border-radius:5px; /* rounding them */ -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px; } li a:hover{ background-color:#666666; text-decoration:none; } #pageContent{ /* the container that holds our AJAX loaded content */ margin-top:20px; border:1px dashed #cccccc; padding:10px; -moz-border-radius: 5px; /* rounding the element */ -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #loading{ /* hiding the rotating gif graphic by default */ visibility:hidden; } jQuery source CODE$(document).ready(function(){ //thực hiện sau khi trang đã được nạp checkURL(); //kiểm tra xem URL có một tham chiếu đến một trang web và tải nó $('ul li a').click(function (e){ //kiểm tra các đường link và sử lý checkURL(this.hash); //.. kiểm tra tham số truyền trên link ( ví dụ như #page1 ) }); setInterval("checkURL()",250); //kiểm tra sự thay đổi trên link sau 250 ms }); var lasturl=""; //here we store the current URL hash function checkURL(hash) { if(!hash) hash=window.location.hash; //if no parameter is provided, use the hash value from the current address if(hash != lasturl) // if the hash value has changed { lasturl=hash; //update the current hash loadPage(hash); // and load the new page } } function loadPage(url) //nạp trang bằng ajax { url=url.replace('#page',''); //kiểm tra và lấy số trang dể xác định là truy cập vào trang số mấy $('#loading').css('visibility','visible'); // hiển thị hình ảnh khi nạp dữ liệu $.ajax({ //tạo đối tượng ajax kết nối tới load_page.php để yêu cầu sử lý type: "POST", url: "load_page.php", data: 'page='+url, // tham số kèm theo để file php sử lý dataType: "html", // trả về kết quả html khi sử lý xong success: function(msg){ if(parseInt(msg)!=0) // nối không bị lỗi { $('#pageContent').html(msg); // đổ giữ liệu kiểu html vào pageContet khi đã lấy được về $('#loading').css('visibility','hidden'); // ẩn hình thông báo trạng thái nạp dữ liệu } } }); } load_file.php CODEif(!$_POST['page']) die("0"); $page = (int)$_POST['page']; if(file_exists('pages/page_'.$page.'.html')) echo file_get_contents('pages/page_'.$page.'.html'); else echo 'There is no such page!'; Về cơ bản nó sẽ kiểm tra xem biến $ _POST['page'] được thiết lập chưa , và nếu đã có , kiểm tra xem tập tin tương ứng page_.html có tồn tại hay không , và chuyển giao cho jQuery sử lý tiếp bước còn lại. Bạn có thể cải thiện điều này bằng cách lấy dữ liệu từ một cơ sở dữ liệu,

Thêm vào trang Google + Số lần xem : 40158 Đánh giá Facebook File đính kèm

• ajax_load_page.zip (22.57 Kb) - Download: 2294

Bài viết liên quan

• 06/02/2015 16:16 html to image php script
• 08/12/2014 11:22 Hướng dẫn cài đặt website php, mysql trên google app engine
• 16/08/2014 15:41 Top 10 mẫu web đẹp ấn tượng
• 11/09/2013 08:47 Cách dùng ob start , ob flush(), flush()
• 30/01/2013 10:23 Tạo dịch vụ API trong PHP, PHP API rest

Bài viết mới hơn