前端js总结
1 . 在controller层中的@ResponseBody注解中返回的要是一个对象而不能用字符串。
2 . 给html页面的按钮添加单击事件
$(#login).click(
function login(){
//todo...
});
3 . jquery获取标签的值(通过id获取)
$("#name").val();
4 . 使用JS来跳转页面:
window.location.href = "edit.html";
也可以跳转到一个action:
window.location.href = "login.do";
5 . 给如 li 标签绑定值
<li class="online">
<a class='checked'>
<i class="fa fa-book" title="online" rel="tooltip-bottom"/>默认笔记本
</a>
</li>
代码如下:
//构建如上标签:
var sli = "";
sli += '<li class="online"> ';
sli += '<a>';
sli += '<i class="fa fa-book" title="online" rel="tooltip-bottom">';
sli += '</i>' + bookName + '</a></li>';
//将bookId绑定到li元素上
var $li = $(sli);
$li.data("bookId", bookId);
//将li元素添加到ul列表中
$("#book_ul").append($li);
6 . 取出 li 标签的绑定值(父标签ul的id为book_ul)。
var $li = $("#book_ul a.checked").parent();
var bookId = $li.data("bookId");//笔记id
7 . jQuery进行表单验证。
$(function () {
$("#registerForm").validate({
rules: {
username: {
required: true,
rangelength: [4, 16],
remote: {
url: "checkUserName.do",
type: "post"
}
},
password: {
required: true,
rangelength: [4, 20]
},
confirmPwd: {
required: true,
equalTo: "#password"
}
},
messages: {
username: {
required: "请填写用户名!",
rangelength: "用户名长度必须在{0}-{1}之间!",
remote: "该用户名已经存在!"
},
password: {
required: "请填写密码!",
rangelength: "密码长度必须在{0}-{1}之间!"
},
confirmPwd: {
required: "请再次确认密码",
equalTo: "两次密码不一致"
}
},
submitHandler: function (form) {
$("#registerForm").ajaxSubmit({
dataType: "json",
success: function (data) {
if (data.success) {
$.messager.confirm("提示", "注册成功", function () {
window.location.href = "/personal.do";
})
} else {
$.messager.popup("注册失败!")
}
}
});
},
errorClass: "text-danger",
highlight: function (element) {
$(element).closest("div.form-group").addClass("has-error");
},
unhighlight: function (element) {
$(element).closest("div.form-group").removeClass("has-error");
}
})
})
在checkUserName.do
中,后台通过返回true
或者false
来判断是否验证成功,如果不成功就显示message的remote值。
jQuery提交表单的时候,通过调用#registerForm.ajaxSubmit
来验证是否成功,在后来弹出的提示框的时候,第三个方法为给确认按钮添加方法,可以进行跳转操作。
8 .
- freemaker
配置
<!--配置freeMarker的模板路径 -->
<bean
class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
<!-- 配置freemarker的文件编码 -->
<property name="defaultEncoding" value="UTF-8"/>
<!-- 配置freemarker寻找模板的路径 -->
<property name="templateLoaderPath" value="/WEB-INF/views/"/>
<property name="freemarkerSettings">
<value>
number_format = 0.##
datetime_format = yyyy-MM-dd HH:mm:ss
</value>
</property>
</bean>
<!--freemarker视图解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
<!-- 是否在model自动把session中的attribute导入进去,可以直接在前端使用session -->
<property name="exposeSessionAttributes" value="true"/>
<!-- 配置逻辑视图自动添加的后缀名 -->
<property name="suffix" value=".ftl"/>
<!-- 配置视图的输出HTML的contentType -->
<property name="contentType" value="text/html;charset=UTF-8"/>
</bean>
使用
<#if logininfo??>
表示logininfo这个对象存在:<#if logininfo??>
//显示logininfo存在时候的信息...
<#else>
//显示不存在時候的信息...
<#if/>
<#assign currentNav="account"/>
表示创建一个currentNav对象并赋值
前端js总结的更多相关文章
- 前端Js框架汇总
概述: 有些日子没有正襟危坐写博客了,互联网飞速发展的时代,技术更新迭代的速度也在加快.看着Java.Js.Swift在各领域心花路放,也是煞是羡慕.寻了寻.net的消息,也是振奋人心,.net co ...
- 闲聊——浅谈前端js模块化演变
function时代 前端这几年发展太快了,我学习的速度都跟不上演变的速度了(门派太多了,后台都是大牛公司支撑类似于facebook的react.google的angular,angular的1.0还 ...
- json处理总结(前端js和后端java)
前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...
- 前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
- 2015 前端[JS]工程师必知必会
2015 前端[JS]工程师必知必会 本文摘自:http://zhuanlan.zhihu.com/FrontendMagazine/20002850 ,因为好东东西暂时没看懂,所以暂时保留下来,供以 ...
- RSA加密前端JS加密,后端asp.net解密,报异常
RSA加密前端JS加密,后端asp.net解密,报异常 参考引用:http://www.ohdave.com/rsa/的JS加密库 前端JS加密代码: function GetChangeStr() ...
- 前端js的书写规范和高效维护的方案_自我总结使用的方案
作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...
- 前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...
- 前端js上传文件 到后端接收文件
下面是前端js代码: <html> <head> <meta http-equiv="Content-Type" content="text ...
- Gridview 行变色和行按钮调用前端js
1.鼠标移动某一行 ,变色 protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Ro ...
随机推荐
- 关于data()获取不到得原因
..原因很简单,版本高低问题 从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中. 所以,还是尽量保持用attr来获取自定义属性
- Java【初识篇】语言概述
什么是计算机语言 语言:是人与人之间用于沟通的一种方式.例如:中国人与中国人用普通话沟通.而中国人要和英国人交流,就要学习英语.计算机语言(编程语言):人与计算机交流的方式.如果人要与计算机交流,那么 ...
- 从零开始学习微信小程序
1.微信公众号和小程序的区别 公众号可以基于html5.vue.react.anguar开发,小程序只能用小程序开发语言. 小程序更接近于原生app. 借助jssdk调用手机功能强大. 开始: 2.创 ...
- centos7下tomcat8.5安装部署与优化
转自:https://www.cnblogs.com/busigulang/articles/8529719.html centos 7 Tomcat 8.5 的安装及生产环境的搭建调优 一 安装to ...
- 收藏这些Safari快捷键,让你的Mac浏览网页更加方便
文章内容及图片来源于:知乎,如果涉及版权问题,请联系作者删除 文章收录于:风云社区(提供上千款各类mac软件的下载) Safari是Mac上的原生浏览器,功能自然很强大,现在每天在Mac上使用的最多的 ...
- ZOJ Monthly, January 2018
A 易知最优的方法是一次只拿一颗,石头数谁多谁赢,一样多后手赢 #include <map> #include <set> #include <ctime> #in ...
- Pandas系列(六)-时间序列详解
内容目录 1. 基础概述 2. 转换时间戳 3. 生成时间戳范围 4. DatetimeIndex 5. DateOffset对象 6. 与时间序列相关的方法 6.1 移动 6.2 频率转换 6.3 ...
- CAS实现单点登录
1.简介 SSO单点登录 在多个相互信任的系统中,用户只需要登录一次就可以访问其他受信任的系统. 新浪微博与新浪博客是相互信任的应用系统. *当用户首次访问新浪微博时,新浪微博识别到用户未登录,将请求 ...
- HttpReponse
属性: django将请求报文中的请求行.头部信息.内容主体封装成 HttpRequest 类中的属性. 除了特殊说明的之外,其他均为只读的. 0.HttpRequest.scheme 表示请 ...
- Spring系列(二) Bean装配
创建应用对象之间协作关系的行为称为装配(wiring), 这也是DI的本质. Spring中装配Bean的方式 Spring提供了三种装配Bean的方式. 隐式的Bean发现机制和自动装配 Java ...