[Ứng dụng php] Load more bằng cách sử dụng jQuery Ajax và PHP từ CSDL

Trong bài mình sẽ hướng dẫn các bạn xây dựng ứng dụng load more bằng cách sử dụng jQuery Ajax và PHP từ CSDL gồm các bước sau:

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.

Bạn đang đọc bài viết [Ứng dụng php] Load more bằng cách sử dụng jQuery Ajax và PHP từ CSDL tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share