Bước 1: Tạo CSDL “dbtest” và bảng “program”
Các bạn tạo một CSDL “dbtest” trong phpMyAdmin và bảng “program” như sau:
Bước 2: Insert nội dung vào bảng
Insert nội dung vào bảng để tý nữa test. Chúng ta insert nội dung các ngôn ngữ như sau:
Bước 3: Tạo file “config.php“
Tạo file config.php để kết nối đến CSDL của bạn.
<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'dbtest';
//kết nối CSDL
$con = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
?>
Bước 4: Tạo file “index.php” với các nội dung như sau
Javascript Code
Trong này tôi sử dụng thư viện của Jquery cùng với là khi click thì sẽ load đến file ajax_more để lấy dữ liệu đổ về.
jsc
PHP code
php1
CSS code
<style type="text/css">
body {
font: normal 13px arial,sans-serif;
}
.tutorial_list{
margin-bottom:20px;
}
div.list_item {
border-left: 4px solid #7ad03a;
padding: 1px 12px;
background-color:#F1F1F1;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
div.list_item {
margin: 5px 15px 2px;
}
div.list_item p {
margin: .5em 0;
padding: 2px;
font-size: 13px;
line-height: 1.5;
}
.list_item a {
text-decoration: none;
padding-bottom: 2px;
color: #0074a2;
-webkit-transition-property: border,background,color;
transition-property: border,background,color;-webkit-transition-duration: .05s;
transition-duration: .05s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.list_item a:hover{
text-decoration:underline;
}
.show_more_main {
margin: 15px 25px;
}
.show_more {
background-color: #f8f8f8;
background-image: -webkit-linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
background-image: linear-gradient(top,#fcfcfc 0,#f8f8f8 100%);
border: 1px solid;
border-color: #d3d3d3;
color: #333;
font-size: 12px;
outline: 0;
}
.show_more {
cursor: pointer;
display: block;
padding: 10px 0;
text-align: center;
font-weight:bold;
}
.loding {
background-color: #e9e9e9;
border: 1px solid;
border-color: #c6c6c6;
color: #333;
font-size: 12px;
display: block;
text-align: center;
padding: 10px 0;
outline: 0;
font-weight:bold;
}
.loding_txt {
background-image: url(loading_16.gif);
background-position: left;
background-repeat: no-repeat;
border: 0;
display: inline-block;
height: 16px;
padding-left: 20px;
}
</style>
Bước 5: Tạo file “ajax_more.php” với nội dung sau
Kết quả thu được khi chạy chương trình:
Trên đây là ứng dụng load more bằng cách sử dụng jQuery Ajax và PHP từ CSDL.
0 nhận xét: