下拉列表之前后端交互
下拉列表之前后端交互
- 下拉列表技术选择
- element-ui
- layui
- jQuery
- 下拉列表之前后端交互思路
- 下拉列表赋值和回显实现
下拉列表技术选择
最近做项目需要用到下拉列表的功能,且需要实现一个页面有两个下拉列表,互相独立,并不是多级联动的那种。在对下拉列表技术选择笔者找到了三种技术实现,分别是element-ui,layui,以及jQuery。
综合对比三种技术实现的下拉列表,layui实现的下拉列表功能最为丰富,且界面最为美观,element-ui次之,jQuery最后。
element-ui
这里从element-ui官方中文文档拿了其中一个例子,element-ui也可以实现下拉列表的众多功能像上面的layui一样。不过element-ui通常和vue结合使用,且采用组件的形式,好用是非常好用,可惜笔者的项目并没有采用组件式开发。
为不让无用代码占用过多篇幅,这里挑选文档中实现下拉列表的关键代码。(下文同)
<el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
layui
这里我从wiki文档中拿出一个例子,并对代码和注释进行了一些删减和修改,可以看到layui实现的下拉列表具有多选,全选,清空,反选,自定义,以及进行模糊搜索自动查询功能,可以说是非常丰富了。
var options = {el: '#demo1',name: 'xmselectName',layVerify: 'required',filterable: true,tips: '你喜欢什么水果呢?傻瓜教程',toolbar: {show: true,list: [ 'ALL', 'CLEAR', 'REVERSE',{name: '自定义',icon: 'el-icon-star-off',method(data){alert('我是自定义的');}} ]},data: [], };
jQuery
下拉列表之前后端交互思路
其实这里笔者采用的是layui结合jQuery方式实现的,在与后台交互方面采用了异步ajax交互,这刚好适合笔者项目,因此笔者对其进行了扩展和延申。在开发中,笔者了解到下拉列表的数据需要从后台数据库表获取,因为同一页面需要实现两个下拉列表,且互相独立,因此笔者在后端写了两个独立的接口,专门获取数据库中的某表数据,返回的都是一个集合。在前端方面笔者采用异步ajax,在回调函数中通过获取访问后台接口返回的对象中的单个属性值对前端输入进行字符串拼接,且采用了$.each()方法进行遍历。(后端接口几分钟就写完了,主要是前端样式及交互方面耗了笔者半天时间。。。无语这么简单还耗了这么长时间。。。)
下拉列表赋值和回显实现
代码实现链接
下拉列表之前后端交互相关推荐
- Mybatis-Plus 通用枚举及前后端交互实战经验
Mybatis-Plus 通用枚举及前后端交互实战经验 一.前言 二.使用示例 1.全局配置 2.枚举类 3.实体类 三.后端返回结果给前端(以jackson为例) 1.@JsonValue 2.@J ...
- 前后端交互,网络请求
这边文章主要根据我自己的前端开发工作经验,东拼西凑出来的一点理解,希望能够对大家有点帮助,如果有误导或者错误的地方还请帮助指正,感谢!!! 前后端交互我理解主要分为三个主要的部分: 1.客户端 2.服 ...
- echarts前后端交互数据_SpringBoot2.0实战(26)整合SpringSecurity前后端分离JSON交互...
在前端的文章中,我们实现了使用 SpringSecurity 实现登录鉴权,并使用数据库存储用户信息,实现登录鉴权 SpringBoot2.0实战(24)整合SpringSecurity之最简登录方法 ...
- [原创]前后端交互的方式整理
前言 本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端 后端如何获取参数 经过业务处理后,返回前端对应的响应数据 前端接受到响 ...
- 写给刚入门的前端工程师的前后端交互指南
转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...
- ajax学习----json,前后端交互,ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
- 前后端交互概述与URL地址格式
前后端交互概述与URL地址格式 接口调用方式 原生ajax 基于jQuery的ajax fetch axios URL地址格式
- Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
- SpringBoot+AntV实现一次前后端交互渲染多个饼状图
场景 效果 SpringBoot+AntV实现饼状图中的花瓣图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169 ...
最新文章
- 蚂蚁森林最高效的合种团队,新树冷杉6天合种成员招募
- 第三章 dubbo内核之ioc源码解析
- eclipse egit(分支管理 上)
- 云计算重头戏:可信计算技术
- 试图抓取非英文windows操作系统镜像时PE无法正常启动解决方法
- python下载邮箱附件_基于Python3 下载邮箱附件,并解压到指定文件夹
- C# 实体类几种深拷贝的方法——解决关于对象赋值,A=B,A改变,B也改变问题
- [剑指offer]面试题第[61]题[JAVA][扑克牌中的点数][HashSet][数组]
- 激动人心!柳叶刀杂志执行主编回柳叶刀烧烤吃烧烤了!
- 学生成绩管理系统实验报告_学习60天python成果,Python变成学生成绩管理系统
- 学术|浅谈语音识别、匹配算法和模型
- C++ 限定名称查找
- Python学习-第3课(函数作用域、列表集合字典元祖)
- Facebook内布拉斯加州数据中心将扩建100万平方英尺
- 【笔记记录】如何写论文?论文的基本结构是什么。
- 鸿蒙应用开发学习1——应用完整开发流程
- python web flask 插件_Python WEB框架之Flask
- 官方jdk各个版本下载地址
- 魔兽怀旧服务器位置,《魔兽世界》怀旧服稀有狼位置坐标大全
- 中考落幕|教育部:力争到2022年全面实行美育中考,美育到底考什么?
热门文章
- 【FPGA知识点】八段共阳极数码管编码表
- 大厂必考深度学习面试题及参考答案
- Mysql修改数据库名
- MySQL数据库修改名称的三种方法
- Lecture 11: Derived Distributions; Convolution; Covariance and Correlation
- 国际短信系统平台后台功能详解-移讯云短信软件
- Paddle 点灯人 之 Tensor
- urllib.request.Request的用法
- exe4j将jar转exe时出现的ClassNotFoundException解决办法
- 基于最大似然估计(matlab实验)