AJAX PHP MySQL Tự động làm mới

Bây giờ hãy xem ví dụ về cách tự động làm mới trang bằng jquery. Chúng ta sẽ nói về tự động tải lại trang bằng jquery. Chúng tôi sẽ tự động tải lại trang bằng setTimeout(), setInterval() và thẻ meta http-equiv. chúng ta có thể làm điều đó một cách đơn giản trong php,. net, java, laravel, codeigniter, v.v.

Đôi khi, chúng tôi yêu cầu tải lại trang sau mỗi 5 giây, 10 giây, 15 giây, 20 giây, 25 giây, 30 giây, v.v. Trong bài đăng này, tôi sẽ giải thích cách thực hiện và có nhiều cách để làm mới trang html. Vì vậy, ở đây bạn sẽ thấy ba ví dụ về tự động làm mới trang php bằng javascript, bạn cũng có thể ngắt quãng thời gian làm mới trang theo cách thủ công. Vì vậy, hãy xem các ví dụ dưới đây

Ở đây tôi sẽ cung cấp cho bạn ba ví dụ về cách tự động làm mới trang bằng jquery. Vì vậy, hãy xem ví dụ dưới đây

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn cách tải dữ liệu từ cơ sở dữ liệu mà không cần làm mới trang và sau đó hiển thị dữ liệu bằng Ajax và jQuery

Bạn chỉ cần tải xuống jQuery để lấy dữ liệu từ cơ sở dữ liệu mà không cần làm mới trang

Bạn cũng có thể muốn tải dữ liệu từ cơ sở dữ liệu khi cuộn trang

Tham gia với hơn 27.000 thành viên trong nhóm Google của bạn và nhận các hướng dẫn mới nhất

Nhận các hướng dẫn mới nhất của chúng tôi, Hướng dẫn cách thực hiện về phát triển web mỗi ngày ngay trong hộp thư đến của bạn

Để tải dữ liệu từ cơ sở dữ liệu mà không cần làm mới trang, chỉ cần hai bước. -

1. Tạo biểu mẫu HTML để tải dữ liệu
2. Kết nối với cơ sở dữ liệu và gửi dữ liệu

Bước 1. Tạo biểu mẫu HTML để tải dữ liệu

Chúng tôi tạo một biểu mẫu HTML bằng phương thức đăng và lưu nó với tên displaydata. html

Bạn có thể thực hiện xác thực để làm cho mã của mình an toàn hơn hoặc bạn có thể xem Cách thực hiện xác thực của chúng tôi trước và sau khi gửi biểu mẫu hướng dẫn

Bước 2. Kết nối với cơ sở dữ liệu và gửi dữ liệu

Trong bước này, chúng tôi kết nối với cơ sở dữ liệu mẫu của chúng tôi có tên là sinh viên và nó có một bảng tên là student_info có 3 cột tên, tuổi, khóa học và sau đó chúng tôi truy vấn cơ sở dữ liệu và nhận được kết quả mong muốn

// loaddata.php

".$row['age']."";
 echo "
".$row['course']."
";
}

}
?>

Dù trang này hiển thị như thế nào trên displaydata. trang html. Bạn cũng có thể xem tải thêm kết quả từ cơ sở dữ liệu bằng ajax

Đó là tất cả, đây là cách tải dữ liệu từ cơ sở dữ liệu mà không cần làm mới trang bằng Ajax và jQuery. Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn. Và xin vui lòng cho nhận xét về hướng dẫn này

Phương thức tải jQuery yêu cầu các trang máy chủ và làm mới bộ chọn HTML với nội dung trang. Trong hướng dẫn này, chúng ta sẽ tự động tải và làm mới DIV với khoảng thời gian định kỳ

Hướng dẫn tải tự động jQuery này sẽ giúp làm mới nội dung với các nguồn cấp dữ liệu mới nhất, tải các biểu ngữ quảng cáo ngẫu nhiên, v.v.

Xem bản trình diễn

Tự động tải jQuery

Cần rất ít dòng mã để tải tự động jQuery. Và nó là,

$(document).ready(function() {
	setInterval(function() {
		$("#screen").load('banners.php')
	}, 2000);
});

Biểu ngữ tệp PHP. php được yêu cầu thông qua jQuery ajax bằng phương thức tải

Tệp này chứa một mảng mã màu HTML. Một trong những màu đó được chọn bằng cách sử dụng mảng PHP rand để thay đổi hình nền biểu ngữ và được tải vào một DIV được chỉ định. Mã PHP là,

	
jQuery DIV Auto Load Refresh
	
This Banner auto loads and refreshes every 2
		seconds.

Sự kiện tải jQuery này xảy ra cứ sau 2 giây để cập nhật biểu ngữ theo định kỳ. Thay vì sử dụng dữ liệu mảng tĩnh, chúng ta có thể kết nối DB để tải div với dữ liệu động

jQuery tự động làm mới hoặc tải lại một trang;

Đôi khi, bạn cần tự động làm mới hoặc tải lại trang web. Vì vậy, hướng dẫn này sẽ hướng dẫn bạn cách tự động làm mới hoặc tải lại trang web bằng thuộc tính meta jQuery và HTML

Cách tự động làm mới hoặc tải lại trang web trong jQuery

Có ba phương pháp đơn giản để tải lại hoặc làm mới trang bằng jquery;

Phương pháp 1 – jQuery Refresh hoặc Reload Page sử dụng Settimeout

Bây giờ, bạn sẽ học cách làm mới hoặc tải lại trang web bằng phương thức setInterval của jQuery. Xem ví dụ sau

Nếu bạn cần ý tưởng cơ bản về Tự động làm mới, hãy xem bài đăng. “Tự động làm mới nội dung sau một khoảng thời gian – jQuery“

Trong một trong các mô-đun ứng dụng trong luận án kỹ thuật của mình, tôi phải đảm bảo rằng người dùng cuối luôn có danh sách thông báo hiện tại. Điều này rất quan trọng vì các tin nhắn có thể được chỉnh sửa, ẩn, xuất bản lại và người dùng không có thời gian để nhớ làm mới trang. Tất nhiên, nó không phải là một vấn đề lớn. Tôi đặt thời gian sau đó trang phải làm mới và mọi thứ đang hoạt động như dự kiến.
Do tính chất đặc thù của người dùng nên thời gian đó không thể ngắn hơn nửa phút. Trang luôn làm mới mỗi nửa phút với.

HTTP request-> database query  ->  result formation -> result sent to the browser

Thật điên rồ. Và với việc ẩn nội dung của khoảng 10-20 tin nhắn, ngay sau khi danh sách được tạo thành đẹp mắt xuất hiện, chúng tôi tải lại trang một lần nữa

Giải pháp có thể hơi thô sơ, nhưng đối với nhu cầu của tôi, nó hoạt động đủ tốt

Ý tưởng

Tạo bộ đếm được lưu trữ trong cơ sở dữ liệu và mã HTML. Với mỗi thay đổi trong danh sách thư (bất kể hành động – chỉnh sửa, thêm, ẩn) tôi tăng bộ đếm trong cơ sở dữ liệu. Sau đó, thay vì lấy toàn bộ danh sách hoặc làm mới một trang, cứ sau nửa phút trong nền, tôi sẽ kiểm tra bộ đếm và so sánh với bộ đếm ẩn trong mã. Trang chỉ được tải lại khi các giá trị này khác nhau

Và mọi người đều hạnh phúc. Tất nhiên đường dẫn truy vấn sẽ không thay đổi. Tuy nhiên, thời gian truy vấn và hình thành kết quả sẽ giảm đáng kể. Và quan trọng nhất, người dùng sẽ không muốn bắn tôi ;o)

Công cụ

PHP, HTML, nguyên mẫu

Chuẩn bị HTML

In section we are attaching prototype framework.

Ở đâu đó trong phần
Ví dụ.

old_count – sẽ giữ nguyên trạng thái của bộ đếm sau khi tải trang.
new_count – sẽ giữ trạng thái của bộ đếm sau yêu cầu tiếp theo.

It doesn’t matter if it will be

function register_changes(){
  $this->db ->query("UPDATE table_name SET counting = counting + 1 WHERE id=1");
}

function check_changes(){
  $result=$this->db->query("SELECT counting FROM table_name WHERE id=1");
  $result=$this->db->fetch_array($result);
  return $result[‘counting’];
}

function check(url,id_st,id_nw){
  req = new Ajax.Request(url, {
    contentType: 'text/html; charset=utf-8',
    method: 'post',
    onSuccess: function(response) {
      //containter update "new_count" with the current value of the counter
      id_nw.update(response.responseText);
      //assign the current counter to variable new
      new = id_nw.innerHTML;
      //assign the status of the counter hidden in the HTML code
      older = id_st.innerHTML; 
      //if the values are diffrent, it will refresh the list of messages by Ajax.Updater. Using that function we will refresh only the list, and not entire page
      if(older!=new){
        //There was a change, rather then refreshing the entire page to the next comparison, we need a new counter value
        id_st.update(new);
        //message list update.
        new Ajax.Updater('msg_list','msg.php');
        return false;
      }
    }
  });
}

// loaddata.php

".$row['age']."";
 echo "
".$row['course']."
";
}

}
?>