位置: 编程技术 - 正文

用php和jQuery来实现“顶”和“踩”的投票功能(php100 jquery教程)

编辑:rootadmin

推荐整理分享用php和jQuery来实现“顶”和“踩”的投票功能(php100 jquery教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:php结合vue,php与jquery,php怎么调用js,php怎么调用js,php使用jquery,php可以和html js写一起吗,php可以和html js写一起吗,php使用jquery,内容如对您有帮助,希望把文章链接给更多的朋友!

当我们浏览网页时,我们想对网页内容如文章、评论中的观点持赞同或反对意见时,可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程,开发者可以通过ajax异步来实现,从而提高用户体验。

我们先要准备为整个实例运行所需的mysql数据表,实例中需要两个表,votes表用来记录对应文章或评论的用户投票数,并且我们默认写入一条id为1的数据以便演示,votes_ip表用来记录用户每次投票的IP,程序根据用户IP决定投票是否有效。

数据表

HTML

在页面中,有两个分别表示“顶”和“踩”的按钮,即#dig_up和#dig_down,按钮上记录了投票的票数以及分别所占的百分比,非常直观的对比投票结果。

CSS

用php和jQuery来实现“顶”和“踩”的投票功能(php100 jquery教程)

我们必须使用CSS来美化页面,我们使用一张图diggs.png来定位不同的按钮背景,通过设置position来定位各元素之间的位置关系。

jQuery

本示例还依赖于jQuery,因此一定不能忘了在页面中先载入jquery库文件。首先,jQuery要处理的是鼠标分别滑向两个投票按钮时变换的背景图片,通过addClass()和removeClass()来实现。

然后,我们初始化数据,就是页面加载后,要显示初始的已经投票的结果,包括各投票数和所占百分比。我们将获取数据的操作写在一个自定义函数getdata()中,通过传递不同的请求地址和id参数来完成数据的载入。函数getdata()中,向URL发送一个ajax请求,根据后台处理的返回结果,如果投票成功则更改页面中相应的元素内容,包括投票数和所占百分比。

PHP

数据的获取都是通过do.php来完成,do.php根据前端页面传递的参数,连接数据库,根据条件判断分别进入“顶”、“踩”和初始数据处理模块,以下是do.php模块代码结构:

函数likes()用来处理“顶”和“踩”投票模块,首先是判断用户IP是否已经投票过了,如果已经投票则直接返回相应提示,如果用户IP没有投票记录则更新votes表,将对应的投票数加1,然后向votes_ip表中插入该用户的IP记录,如果操作成功,则调用jsons()输出投票后的投票数和所占百分比等数据,否则输入操作失败的提示信息。

函数jsons()用来读取votes表中相应id的投票数,并计算百分比,最后将这些信息以json格式输出,供前端页面使用。

该实例可以应用到常见的"赞"、同意和反对评论、投票系统等场景中,运用了Ajax原理实现的前后端交互功能。do.php中还有个函数get_client_ip()用来获取用户真实IP。

标签: php100 jquery教程

本文链接地址:https://www.jiuchutong.com/biancheng/301940.html 转载请保留说明!

上一篇:php is_writable判断文件是否可写实例代码(php或者判断)

下一篇:php加密解密字符串示例(php sha1加密 解密)

  • 深入分析SqlServer查询计划(深入分析的成语)

    还是来看看这个【执行过程表格】吧。我来挑几个重要的说一下。【Rows】:表示在一个执行步骤中,所产生的记录条数。(真实数据,非预期)【Executes】:表示某个执行步骤被执行的次数。(真实数据,非预期)【Stmt Text】:表示要执行的步骤的描述。【EstimateRows】:表示要预期返回多少行数据。

    在这个【执行过程表格】中,对于优化查询来说,我认为前三列是比较重要的。对于前二列,我上面也解释了,意思也很清楚。 前二列的数字也大致反映了那些步骤所花的成本,对于比较慢的查询中,应该留意它们。 【Stmt Text】会告诉你每个步骤做了什么事情。对于这种表格,它所要表达的其实是一种树型信息(一行就表示在图形方式下的一个节点), 所以,我建议从最内层开始去读它们。做为示例,我来解释一下这张表格它所表达的执行过程。

    第5行:【Clustered Index Seek(OBJECT:([MyNorthwind].[dbo].[Customers].[PK_Customers]), SEEK:([MyNorthwind].[dbo].[Customers].[CustomerID]=[MyNorthwind].[dbo].[Orders].[CustomerID]) ORDERED FORWARD)】, 意思是说,SQL Server在对表Customers做Seek操作,而且是按照【Clustered Index Seek】的方式,对应的索引是【PK_Customers】,seek的值来源于[Orders].[CustomerID]

    第4行:【Clustered Index Scan(OBJECT:([MyNorthwind].[dbo].[Orders].[PK_Orders]), WHERE:([MyNorthwind].[dbo].[Orders].[OrderDate]>='-- ::." class="img-responsive" alt="深入分析SqlServer查询计划(深入分析的成语)">

    深入分析SqlServer查询计划(深入分析的成语)

  • MYSQL导入导出sql文件简析(MySQL导入导出命令)

    MYSQL导入导出sql文件简析(MySQL导入导出命令)

  • 设置密码保护的SqlServer数据库备份文件与恢复文件的方法(设置密码保护的pdf怎么转word)

    设置密码保护的SqlServer数据库备份文件与恢复文件的方法(设置密码保护的pdf怎么转word)

  • Ubuntu安装mac os x主题让你的Ubuntu看起来更像MAC OS X(Ubuntu安装ssh)

    Ubuntu安装mac os x主题让你的Ubuntu看起来更像MAC OS X(Ubuntu安装ssh)

  • JavaScript中字面量与函数的基本使用知识(javascript字面量)

    JavaScript中字面量与函数的基本使用知识(javascript字面量)

  • Python2.x版本中基本的中文编码问题解决(python2.7.11)

    Python2.x版本中基本的中文编码问题解决(python2.7.11)

  • shell脚本监控系统负载、CPU和内存使用情况(shell脚本监控进程)

    shell脚本监控系统负载、CPU和内存使用情况(shell脚本监控进程)

  • JS实现的新浪微博大厅文字内容滚动效果代码(js newyork)

    JS实现的新浪微博大厅文字内容滚动效果代码(js newyork)

  • jQuery fadeOut 异步实例代码详解(jquery 异步提交表单)

    jQuery fadeOut 异步实例代码详解(jquery 异步提交表单)

  • Python中列表和元组的使用方法和区别详解(python中列表和元组的典型案例)

    Python中列表和元组的使用方法和区别详解(python中列表和元组的典型案例)

  • 使用jQuery制作Web页面遮罩层插件的实例教程(使用jQuery制作动画与特效及插件的应用)

    使用jQuery制作Web页面遮罩层插件的实例教程(使用jQuery制作动画与特效及插件的应用)

  • 工资薪金税前扣除标准是14%吗
  • 税控盘退费怎么做会计分录
  • 运输企业内账
  • 单位出租不动产印花税
  • 企业内部研发支出会计处理探讨
  • 应收账款计入借方贷方
  • 计提坏账所得税费用分录
  • 固定资产报废属于非常损失吗
  • 房租 收入
  • 处置固定资产简易征收
  • 外地建筑工程开票流程
  • 服务业暂估成本分录
  • 可抵扣增值税的发票
  • 上市公司个税手续流程
  • 合同中没有明确违约责任怎么办
  • 印花税按主营业务成本计算吗
  • 未弥补完亏损可以计提盈余公积
  • 跨年度的费用发票可以入账吗
  • 建筑业销项税和进项税计算
  • 王者荣耀中甄姬的cp是谁
  • php获取远程文件数据
  • 鸿蒙系统如何自定义图标
  • mcdlc.exe - mcdlc是什么进程文件 有何作用
  • 公司账户上的钱怎么转到老板账户上
  • 付款凭证怎么填写电脑
  • 无形资产摊销时点
  • linux操作系统文件系统
  • vue路由点击没反应
  • 亚士顿森林薄雾日出,英国东萨塞克斯郡 (© Tim Stocker Photography/Getty Images)
  • 职工取得全年一次性奖金如何计算缴纳个人所得税?
  • php session存储方式
  • 4月满月是几号
  • thinkphp怎么用
  • php中undefined index
  • 印度泰姬陵建筑
  • 项目辅材计入什么科目
  • 固定资产卡片账自固定资产报废后的保管期限是
  • vue–router
  • vuex使用步骤
  • 待抵扣进项税在贷方什么意思
  • zendframework3中文手册
  • php headers
  • thinkphp如何做微服务
  • 微擎框架安装教程
  • 以前年度损益调整借贷方向
  • 应收账款收不回来
  • python从键盘输入正整数n,计算1+2+3
  • 在access中,数据库对象导出到另一数据库中
  • 扣除公积金分录
  • 对公账户分类及区别
  • 生产工人工资属于生产过程中发生的费用吗
  • 现金流量表现金净增加额负数
  • 知道收入不知道成本
  • 待抵扣进项税额和进项税额的区别
  • 长期股权投资转让会计处理
  • 支付股东借款现金流量表怎么填
  • 投资收益 增加
  • 企业固定资产清理流程
  • 深入sql编程开发与优化
  • vista启用aero
  • win7如何ghost
  • macbook显示flash插件故障
  • win8如何输入命令
  • win80xc0000001怎么修复
  • linux删除sdb1
  • Android游戏开发实践指南
  • surf apk android
  • windows批处理官方教程
  • linux启动的过程
  • 批处理 /a
  • js图像
  • shell实现的实验步骤
  • JavaScript中iframe实现局部刷新的几种方法汇总
  • javascript几种类型
  • android 自定义
  • android sdk api文档
  • 利息发票可以抵扣进项税额吗
  • 车票进项税怎么认证
  • 各国进口汽车综合税率表
  • 发现个人所得税被物业挂职
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设