Load more data using jQuery,AJAX, and PHP

index.php

<!DOCTYPE html>
<html>
<head>
<title>Load More</title>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-size: 13px;
font-family: arial;
}
.div_main{
margin: 0 auto;
width: 950px;
height: 500px;
}
.div_box{
padding: 5px;
margin-bottom: 5px;
}
.div_box>p{
margin-bottom: 5px;
background-color: #ccc;
padding: 5px;
}
.div_box>p>b{
color:red;
}
.btnMore{
padding: 5px;
border: 1px solid #ccc;
}
.btnMore:hover{
cursor: pointer;
}

</style>
</head>
<body>
<div class="div_main">
<input type="hidden" class="def" value="0"/>
<div class="div_box"></div>
<input type="button" value="MORE" class="btnMore" />
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.btnMore').on('click',function(){
var add_data,beging=$('.def').val();
$.ajax({
url: 'more.php',
type: 'GET',
data: {'beging':beging}
})
.done(function(data) {
var json = $.parseJSON(data);
var last = 0;
$.each(json, function( index, value ) {
add_data='<p><b>ID: </b>'+value.actor_id+'<b> FIRST NAME: </b>'+value.first_name +'<b> LAST NAME: </b>'+value.last_name+'<b> DATE: </b>'+value.last_update+'</p>';
$('.div_box').append(add_data);
})
$('.def').val(parseInt(beging)+5);
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});

});
});
</script>
</body>
</html>

more.php

<?php
$con = mysql_connect('localhost','root','');
mysql_select_db("sakila",$con);
$arrData = array();
$being = isset($_GET['beging']) ? $_GET['beging']:0;
$sql = "SELECT * FROM actor LIMIT $being,5";
$result = mysql_query($sql,$con);
while ($row = mysql_fetch_assoc($result)) {
$arrData[]=$row;
}
echo json_encode($arrData);
?>

sql file
/*
Navicat MySQL Data Transfer

Source Server : Local
Source Server Version : 50625
Source Host : 127.0.0.1:3306
Source Database : sakila

Target Server Type : MYSQL
Target Server Version : 50625
File Encoding : 65001

Date: 2016-10-28 18:56:41
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for actor
-- ----------------------------
DROP TABLE IF EXISTS `actor`;
CREATE TABLE `actor` (
`actor_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
`first_name` varchar(45) NOT NULL,
`last_name` varchar(45) NOT NULL,
`last_update` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
PRIMARY KEY (`actor_id`),
KEY `idx_actor_last_name` (`last_name`)
) ENGINE=InnoDB AUTO_INCREMENT=201 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of actor
-- ----------------------------
INSERT INTO `actor` VALUES ('1', 'PENELOPE', 'GUINESS', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('2', 'NICK', 'WAHLBERG', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('3', 'ED', 'CHASE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('4', 'JENNIFER', 'DAVIS', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('5', 'JOHNNY', 'LOLLOBRIGIDA', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('6', 'BETTE', 'NICHOLSON', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('7', 'GRACE', 'MOSTEL', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('8', 'MATTHEW', 'JOHANSSON', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('9', 'JOE', 'SWANK', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('10', 'CHRISTIAN', 'GABLE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('11', 'ZERO', 'CAGE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('12', 'KARL', 'BERRY', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('13', 'UMA', 'WOOD', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('14', 'VIVIEN', 'BERGEN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('15', 'CUBA', 'OLIVIER', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('16', 'FRED', 'COSTNER', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('17', 'HELEN', 'VOIGHT', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('18', 'DAN', 'TORN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('19', 'BOB', 'FAWCETT', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('20', 'LUCILLE', 'TRACY', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('21', 'KIRSTEN', 'PALTROW', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('22', 'ELVIS', 'MARX', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('23', 'SANDRA', 'KILMER', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('24', 'CAMERON', 'STREEP', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('25', 'KEVIN', 'BLOOM', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('26', 'RIP', 'CRAWFORD', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('27', 'JULIA', 'MCQUEEN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('28', 'WOODY', 'HOFFMAN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('29', 'ALEC', 'WAYNE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('30', 'SANDRA', 'PECK', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('31', 'SISSY', 'SOBIESKI', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('32', 'TIM', 'HACKMAN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('33', 'MILLA', 'PECK', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('34', 'AUDREY', 'OLIVIER', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('35', 'JUDY', 'DEAN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('36', 'BURT', 'DUKAKIS', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('37', 'VAL', 'BOLGER', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('38', 'TOM', 'MCKELLEN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('39', 'GOLDIE', 'BRODY', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('40', 'JOHNNY', 'CAGE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('41', 'JODIE', 'DEGENERES', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('42', 'TOM', 'MIRANDA', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('43', 'KIRK', 'JOVOVICH', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('44', 'NICK', 'STALLONE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('45', 'REESE', 'KILMER', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('46', 'PARKER', 'GOLDBERG', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('47', 'JULIA', 'BARRYMORE', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('48', 'FRANCES', 'DAY-LEWIS', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('49', 'ANNE', 'CRONYN', '2006-02-15 04:34:33');
INSERT INTO `actor` VALUES ('50', 'NATALIE', 'HOPKINS', '2006-02-15 04:34:33');

Output:

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

Some Lesson - RAM PUKAR

Load more data using jQuery,AJAX, and PHP

About Ram Pukar

0 comments: