攒,顶,踩功能主要用于评论中这里我们来做一个简单基于jquery ajax与php的mysql实现的攒,顶,踩功能。
php应用越来越多,也越来越广泛,为了增加网站的丰富多彩,从而出现了很多新的技术。ajax是现代网站中不能缺少的一项技术,他可以异步刷新数据,而实现很多效果,比如刷新验证码,微博中的攒功能,都是运用这个。
主页文件index.php,代码如下:
- <script type="text/javascript" src="/Public/js/jquery.min.js"></script>
- <script type="text/javascript" src="finger_ajax.js"></script>
- <?php
- header("Content-type:text/html;charset=utf-8");
- include "finger_ajax.php";
- $sql = "select * from finger_ajax";
- $res = mysql_query($sql,$link);
- while($row = mysql_fetch_array($res)){
- echo "<p>".$row['title']." <a href='#' onclick='finger(".$row['id'].")'><img src='finger.jpg'/>攒一下(<span class='finger".$row['id']."'>".$row['finger']."</span>)</a></p> ";
- }
- ?>
处理ajax请求及配置信息文件finger_ajax.php,代码如下:
- <?php
-
-
- $dbHost = "localhost";
- $dbUser = "root";
- $dbPass = "dddddd";
- $dbName = "test";
- $dbCharset = "utf8";
-
-
- $link = mysql_connect($dbHost,$dbUser,$dbPass) or die(mysql_error());
- mysql_query("set names ".$dbCharset);
- mysql_select_db($dbName);
-
-
- if(!emptyempty($_POST['id'])){
- $id = $_POST['id'];
-
- $sql = "update finger_ajax set finger=finger+1 where id=$id;";
- if(mysql_query($sql,$link)){
- echo "ok";
- }else{
- echo "failed";
- }
- }
- ?>
js文件finger_ajax.js代码如下:
-
- function finger(topic_id){
- $.post("finger_ajax.php", { "id": topic_id },
- function(data){
- if(data=="ok"){
- alert("感谢您的支持!");
- }else{
- alert("对不起,失败了!");
- }
- }, "text");
-
- var finger = parseInt($(".finger"+topic_id).html())+1;
-
- $(".finger"+topic_id).html(finger);
- }
数据库代码finger_ajax.sql代码如下:
- DROP TABLE IF EXISTS `finger_ajax`;
- CREATE TABLE `finger_ajax` (
- `id` int(11) NOT NULL AUTO_INCREMENT,
- `title` varchar(50) NOT NULL DEFAULT '',
- `finger` int(11) NOT NULL DEFAULT '0',
- PRIMARY KEY (`id`)
- ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
-
-
-
-
-
- INSERT INTO `finger_ajax` VALUES ('1', '今天天气还不错哦!去做点什么好呢?', '10');
- INSERT INTO `finger_ajax` VALUES ('2', '欢迎来到 www.111cn.net,国庆将至,祝大家国庆节快乐!!', '3');
|