心得体会-前端js

心得体会-前端js

1. 前台代码阅读

header.html

<script>
    $(function () {
        $.get("user/findOneUser", {}, function (data) {
            var msg = "欢迎回来，" + data.name;
            $("#span_username").html(msg);
        });
        $.get("category/findAll", {}, function (data) {});
    
         $("#search-button").click(function () {
            var rname = $("#search_input").val();
            var cid = getParameter("cid");
	location.href = "http://localhost/travel/route_list.html?cid=" + cid + "&rname=" + rname;
        });		
});		</script>

1. 使用入口函数$(function () {} 想要某个功能自动加载，就只能使用入口函数。将某个功能剥离出来function()，其他可以直接用这个方法
2. $.get("user/findOneUser", {}, function (data) {get请求的是这个方法，{}里面方法参数，function (data)内部是返回的类。可以对返回的数据进行操作 。这里就是在发送ajax请求
3. $("#span_username").html(msg);将js对象转换为jquery对象，改变其内部数据。#后面是绑定的

login.html

//对登录按钮绑定事件，ajax请求提交表单数据
		$(function(){
			$("#btn_sub").click(function(){
				$.post("user/login",$("#loginForm").serialize(),function(data){
					//这里的data还是result info格式
					if (date.flag){
						location.href = "index.html";
						//登录跳转后，用户信息保存在session中，由于是html页面没有el表达式来直接获取。
						//只能ajax请求服务器，来查询用户
					}else{$("#errorMsg").html(data.errorMsg);}
				});	});	});

1. $("#loginForm").serialize() 传给方法的参数转为json格式。因为这里是form表单

route_details.html

<script>
    $(document).ready(function () {	imagine();	});
	... ... ...//各种图片展示方法
    $(function () {
        var rid = getParameter("rid");
        $.get("route/findOne", {rid: rid}, function (route) {
            $("#rname").html(route.rname);
            ... ... ...//填写替换各种内容  拼接好图片链接和html代码
		$("#ddImagine").html(ddStr);
            imagine();
            var timer = setInterval("auto_play()", 2000);
        });		});

    $(function () {
        //发送ajax请求，用户是否收藏
        var rid = getParameter("rid");
        $.get("route/isFavorite", {rid: rid}, function (flag) {
            if (flag) {
                $("#favorite").addClass("btn already");
                //prop只能删除固有的属性，也就是默认属性。不能删除掉只能重新设置属性
                $("#favorite").attr("disabled", "disabled");
                //$("#favorite").prop("disabled", "disabled");
                $("#favorite").removeAttr("onClick");
                //删除点击事件属性，这里可以后期自己写一个再点击就取消收藏（绑定新的事件）
            }}); });

    function addFavorite() {
        //判断用户是否登录，ajax请求Servlet去查询
        var rid = getParameter("rid");
        $.get("user/findOneUser", {}, function (user) {
            if (user) {
                //发送ajax请求
                //routeServlet中的addFavorite（rid）
                $.get("route/addFavorite", {rid: rid}, function () {
                    alert("已经收藏");
                    location.reload();
                    window.scrollTo(0, 0);
                });
            } else {
                alert("登录一下，啥b");
                location.href = "http://localhost/travel/login.html";
            }
        });
    }

</script>

1. $(document).ready(function () { imagine(); });页面加载完成后执行

2. getParemeters() js方法

   function getParameter(name) {
       var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
       var r = location.search.substr(1).match(reg);
       if (r != null) return (r[2]);
       return null;
   }
   

3. $("#favorite").addClass("btn already");prop只能删除固有的属性，也就是默认属性。不能删除掉只能重新设置属性
   $("#favorite").attr("disabled", "disabled");``````$("#favorite").removeAttr("onClick");删除点击事件属性，这里可以后期自己写一个再点击就取消收藏（绑定新的事件）

---

总结

​ 用好jQuery来获取事件（使用绑定的id）；ajax来异步请求数据，对返回的数据操作；拼接html语句时，先写好一个例子，将例子替换成’++’，在++之间为代码。

​ html页面无法使用el表达式，所以只能AJAX来请求后台获取Session。

​ 这里请求数据的地址就是Servlet

只有Servlet能和前台html来交流