目录
回复内容:
首页 后端开发 php教程 javascript - 标签技术,是怎么实现的?

javascript - 标签技术,是怎么实现的?

Jun 06, 2016 pm 08:12 PM
html javascript php

后台是用ThinkPHP框架的,前台页面呈现的Tag标签技术,怎么实现呢?
就比如segmentFault的这种标签技术?
在“问题”这张表格里有一个叫做tag的字段?
怎么实现像segmentFault的这种标签效果呢?

javascript - 标签技术,是怎么实现的?

更具体的问题在这里:
https://segmentfault.com/q/1010000004909...

回复内容:

后台是用ThinkPHP框架的,前台页面呈现的Tag标签技术,怎么实现呢?
就比如segmentFault的这种标签技术?
在“问题”这张表格里有一个叫做tag的字段?
怎么实现像segmentFault的这种标签效果呢?

javascript - 标签技术,是怎么实现的?

更具体的问题在这里:
https://segmentfault.com/q/1010000004909...

使用select2、tag-it等等,我使用的是tag-it。
整个的流程大致是:在输入框输入字符的时候,会把当前的value值与数据库中的数据对比(ajax请求,data参数就是当前的value值),看看是否有备选项,如下面这样:
javascript - 标签技术,是怎么实现的?
有的话,后台就返回相应的value和id,直接选中添加即可;
没有的话就是新创建标签:
javascript - 标签技术,是怎么实现的?
sf的逻辑是这样的:当你创建新标签的时候,后台直接创建,然后返回相应的id值。它是把创建标签作为了一个单独的过程,和当前提问或发表文章并不是“100%挂钩”,即当你创建一个新标签之后,你又取消了相关的提问,这时虽然你没有提问,但是你创建的标签已经在数据库中存在了,下次搜索标签时这个标签已经作为备选项存在了。关于是在创建新标签的时候就写入到数据库中还是在最后一步点击“提交”时再写入数据库,Tag-it插件的使用:如何传递额外数据给服务器?,我在这个问题的答案最后简单讨论了一下,有兴趣的可以看一下。

最后提交时,获取每个标签的id值,与问题的id值再关联起来,就知道每个问题对应哪些标签了。

问题表 标签表 问题标签关联表
标签应该还有一级二级之分吧 也就是每个标签需要记录它的父级标签

楼上所述方法是利用传统SQL来实现,我说一个利用NoSQL来实现的。

题主可以看一下这本书:

Redis入门指南

其中有一章讲到了 利用Redis 来实现你描述的需求。

最后提交的时候,应该怎么取得已选择的标签的内容呢?
我的意思是说,最后,已经选择的标签的内容,应该要记录进数据库吧,怎么取出,已经选择的标签的列表呢?

嗯,主要的问题是,怎么从隐藏域里移除已经添加的tag

实现这样的效果从代码层方面,有两种方法:
首先来说第一种,一开始就把所有的父类ID和子类ID标签数据都读取出来显示在页面上(利用CSS显示、隐藏),然后jquery事件,click或者focus来切换选中的父类标签,来展示父类标签对应的子类标签;这种方法显示效果最快,但是一开始就读取了数据,数据量大的时候对加载会有那么一点点影响,但问题应该不是很大;

第二种就是,利用ajax的原理实现,实现局部刷新,同样的需要用到jquery事件,click或focus,选中时候获得父类标签ID,拿到ID用ajax传递到后台,从数据库读取数据返回前台,刷新子标签;这种即时显示数据的效果获取可能会差点,但避免了方法一的一开始就加载大量数据拖慢效率的缺点;

还有一种,利用缓存

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
PHP和Python:比较两种流行的编程语言 PHP和Python:比较两种流行的编程语言 Apr 14, 2025 am 12:13 AM

PHP和Python各有优势,选择依据项目需求。1.PHP适合web开发,尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能,语法简洁,适合初学者。

PHP:网络开发的关键语言 PHP:网络开发的关键语言 Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言,特别适合web开发。1.PHP可以嵌入HTML,处理HTTP请求和响应,支持多种数据库。2.PHP用于生成动态网页内容,处理表单数据,访问数据库等,具有强大的社区支持和开源资源。3.PHP是解释型语言,执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时,可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7

PHP行动:现实世界中的示例和应用程序 PHP行动:现实世界中的示例和应用程序 Apr 14, 2025 am 12:19 AM

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务:用于购物车功能和支付处理。2)内容管理系统:用于动态内容生成和用户管理。3)API开发:用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践,PHP应用的效率和可维护性得以提升。

PHP的持久相关性:它还活着吗? PHP的持久相关性:它还活着吗? Apr 14, 2025 am 12:12 AM

PHP仍然具有活力,其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用;2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色;3)PHP不断进化和优化,适用于初学者和经验丰富的开发者。

PHP和Python:代码示例和比较 PHP和Python:代码示例和比较 Apr 15, 2025 am 12:07 AM

PHP和Python各有优劣,选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。

PHP与其他语言:比较 PHP与其他语言:比较 Apr 13, 2025 am 12:19 AM

PHP适合web开发,特别是在快速开发和处理动态内容方面表现出色,但不擅长数据科学和企业级应用。与Python相比,PHP在web开发中更具优势,但在数据科学领域不如Python;与Java相比,PHP在企业级应用中表现较差,但在web开发中更灵活;与JavaScript相比,PHP在后端开发中更简洁,但在前端开发中不如JavaScript。

PHP和Python:解释了不同的范例 PHP和Python:解释了不同的范例 Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程,但也支持面向对象编程(OOP);Python支持多种范式,包括OOP、函数式和过程式编程。PHP适合web开发,Python适用于多种应用,如数据分析和机器学习。

PHP:处理数据库和服务器端逻辑 PHP:处理数据库和服务器端逻辑 Apr 15, 2025 am 12:15 AM

PHP在数据库操作和服务器端逻辑处理中使用MySQLi和PDO扩展进行数据库交互,并通过会话管理等功能处理服务器端逻辑。1)使用MySQLi或PDO连接数据库,执行SQL查询。2)通过会话管理等功能处理HTTP请求和用户状态。3)使用事务确保数据库操作的原子性。4)防止SQL注入,使用异常处理和关闭连接来调试。5)通过索引和缓存优化性能,编写可读性高的代码并进行错误处理。

See all articles