get请求的url经常会过长,导致数据丢失
解决方案:采用 post 请求,来解决该问题,写一个采用 post 请求的函数即可
function sendByPost(url, ids) { var oForm = document.createElement('form') oForm.method = 'post' oForm.action = url var hasitemsids_input = document.createElement('input') hasitemsids_input.type = 'hidden' hasitemsids_input.name = 'ids' hasitemsids_input.value = ids oForm.appendChild(hasitemsids_input) document.body.appendChild(oForm) oForm.submit()}
也可以使用 formData
给layui的下拉框赋值,同时触发layui的下拉框选择事件
前提:该选择框需要放在 layui-form 的表单下
$("#citySerch").val(cityId);// 给下拉框赋值Let filter=$('#citySerch').attr('lay-filter');//获取该元素的lay-filter属性filter&&layui.event('form','select('+filter+')',{elem:$("#citySerch"),value:cityId});//触发该标签的select事件form.render('select');// 重新渲染下拉框
动态加载上传图片
前端
// 就是获取图片的存储路径,让图片标签的src值指向一个后台写流的方法function showImg(img) { let url = img.url let path = '/uploadFileFile/getBytesByAbsolutePath?imgPath=' + url $('img').attr('src', path)}
后端
/** * @Description: 根据图片的绝对路径返回字节流 */@RequestMapping(value = "/getBytesByAbsolutePath")@ResponseBodypublic void getBytesByAbsolutePath(HttpServletRequest request, HttpServletResponse response) throws Exception{ String imgPath = request.getParameter("imgPath ...
利用本地的html文件通过ajax访问服务器
在 chrome 的快捷方式上右键属性,选中快捷方式 tab,在目标栏的最后添加以下参数,然后重启 chrome,用来测试的文件就放在下面配置的 data-dir 里
注意:每个—前面都有一个空格
注意:服务器必须开启跨域访问
--user-data-dir="C:\Users\13551\Desktop" --test-type --disable-web-security
Promise
promise 封装 ajax,并且 promise 的链式调用的示例let request = function (url, type = 'get', data = '', msg = '请求失败') { return new Promise((resolve, reject) => { // 封装jq ajax $.ajax({ type, url, async: true, data, success(res) { //成功的回调函数 if (res.code === 500) { Hussar.info(msg) reject() } resolve(res.data) }, error() { reject() } & ...
后台接口返回的数据出现了$ref,$data.xxx的字样
分析原因:个人理解是如果后台返回了个 map,map 里面放了两个 key 值,但是这两个 key 所对应的 value 指向的是同一个目标地址,概括为两个 key 所对应的 value 是同一个,或者说一个 value 对象(值相同,地址相同)用 map 的两个 key 值存储,那么返回前台时,第二个 key 的值不会是 value 而是第一个 key 的 value 的地址。
可以简单理解为:map 里面有重复的 value,那么就会出现如标题所示的字样。
常见的前端手写功能
1、防抖function debounce(fn, delay) { let timer return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this, args) }, delay) }}// 测试function task() { console.log('run task')}const debounceTask = debounce(task, 1000)window.addEventListener('scroll', debounceTask)
2、节流function throttle(fn, delay) { let last = 0 // 上次触发时间 return function (...args) { ...
常用的区段查询表单验证
1.正整数区段查询支持全不填,全填,和单独填任意一个
html 代码
<div class="layui-input-inline"> <input type="text" id="sjtjStartMile" placeholder="开始里程(m)" autocomplete="off" class="layui-input" /></div><div class="layui-form-mid">-</div><div class="layui-input-inline"> <input type="text" id="sjtjEndMile" placeholder="结束里程(m)" autocomplete="o ...
某个dom全屏或者整体页面全屏
//如果dom没有就让整个页面全屏const full = document.querySelector('#box') || document.documentElementif (full.RequestFullScreen) { full.RequestFullScreen() //兼容Firefox} else if (full.mozRequestFullScreen) { full.mozRequestFullScreen() //兼容Chrome, Safari and Opera等} else if (full.webkitRequestFullScreen) { full.webkitRequestFullScreen() //兼容IE/Edge} else if (full.msRequestFullscreen) { full.msRequestFullscreen()}
ajax前后台参数传递
contentType 的类型
ajax 的默认 contentType 是:
“application/x-www-form-urlencoded;charset=utf-8”
它是最普通的{key-value,key-value}的格式
无论 get 还是 post,springboot 可以默认封装成一个简单的 bean,此时不用添加任何注解。但是如果 bean 的属性有数组等复杂属性。那么会封装失败
后台也可以用@RequestParam 注解来提取某个简单的参数,如果同名该注解可以省略。但是对于 get 请求。不能提取数组。
想要提取数组。请求方式必须为 post 并且语法如下@RequestParam(“ids[]”)
如果为
contentType:”application/json;charset=utf-8”,
data:JSON.stringfy(data),
此时,请求方式必须为 post,后台用@RequestBody(JavaBean javaBean)
来接收,该方式几乎是除了文件外的万能方式。
如果为 false
那么一般就是上传文件,详见 ssmpj ...
获取时间
var getDate = function getNowFormatDate() { //获取当前时间 var date = new Date() var seperator1 = '-' var seperator2 = ':' var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1 var strDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + ' ' + date.getHours() + seperator2 + da ...
ajax导入静态文件
导入静态json$.ajax({ type: 'get', url: Hussar.ctxPath + '/static/js/homePage/map.json', // 文件相对地址(相对于使用这个js脚本的html文件,非常重要,仔细理解这句话) dataType: 'json', // 类型,文件里定义的变量的类型 async: false, success: function (data) { console.log(data) }})
导入静态txt// 注意:导入txt时不要写dateType,会报错$.ajax({ url: './GZ11pathData.txt', // 文件相对地址(相对于使用这个js脚本的html文件,非常重要,仔细理解这句话) success: function (data) { console.log(data) },})
事件委托
拼接的元素对于 jQ 的 click 无响应,此时就需要事件委托
$('.file_container').on('click', '.file_del', (event) => { // 此时就能获取被点击的子元素,获取不到尝试加个parent()或children()试试 // 如过target里面还有元素,那么点击该元素也会触发,即会有事件冒泡 let dom = $(event.target)})$('.file_container').on('click', '.file_del', function () { // 或者不用event对象,直接用$(this)正常来说也能获取到 let dom = $(this)})
利用jQuery实现让容器的滚动条滚动到某个内部元素的位置。让内部元素本来在中间,一下子跑到最上面
<ul class="parent" style="height:50px;overflow:auto"> <li class="children" style="height:25px"></li> <li class="children" style="height:25px"></li> <li class="children" style="height:25px"></li> <li class="children" style="height:25px"></li></ul>
$('.parent').scrollTop( $('.children:eq(2)').offset().top - $( ...
实时监听input或textarea值发生变化(不需要失去焦点)
暂时只对 input 和 textarea 有效
select 没经过测试,不知道对 select 是否也有效
$('textarea').bind('input propertychange', function () { // do sth})
fileinput插件获取不到手动拖拽的文件对象的问题
var frame;$("#add_file").fileinput({ language: 'zh', //中文 uploadUrl: '/' + url + '/uploadFile', showUpload: false, //是否显示上传按钮 showCaption: false, //不显示文字表述 uploadAsync: true, //采用同步上传 removeFromPreviewOnError: true, //当文件不符合规则,就不显示预览 dropZoneEnabled: true, dropZoneTitle: '拖拽文件到这里 …<br>只支持单文件上传', maxFileCount: 100, maxFileSize: 0, //单位为kb,如果为0表示不限制文件大小 uploadEx ...
键盘事件
回车搜索$('#search').bind('keydown', function (event) { var e = event || window.event || arguments.callee.caller.arguments[0] if (e.keyCode == 13) { // search是输入框,此处是要执行输入完毕后按下回车后的操作 //………….. }})
关于堆叠属性stack的问题
多系列的柱状图 stack 如果是数字且越小,该系列的每根柱子越靠前;
但是如果 stack 为 0,那么该系列的每根柱子都会被放到最后;
这是一个需要注意的问题!!!!!!!!!
npm常用命令
检查前 NPM 源:npm get registry
设置镜像命令npm config set registry http://registry.npm.taobao.org/ #设置淘宝镜像npm config set registryhttps://registry.npmjs.org #设置默认镜像
初始化项目建立一个空文件夹,在命令提示符进入该文件夹 执行命令初始化npm init按照提示输入相关信息,如果是用默认值则直接回车即可。name: 项目名称name: 项目名称description: 项目描述keywords: {Array}关键词,便于用户搜索到我们的项目最后会生成 package.json 文件,这个是包的配置文件,相当于 maven 的 pom.xml我们之后也可以根据需要进行修改。如果想直接生成 package.json 文件,那么可以使用命令npm init -y
当从 git/svn 下载源码的时候,此时没有 node_modules 目录,使用此命令能根据 package.json 里的配置的依赖版本下载所有的依赖包npm install
( ...
监听窗口的尺寸变化,动态刷新echarts图
window.onresize = function () { let chart = echarts.init(document.getElementById('id')) chart.resize()}