前端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对象并赋值