文档章节

无尽之坑——后台眼里的页面

Lien6o
 Lien6o
发布于 2017/05/11 10:00
字数 1346
阅读 35
收藏 0

无尽之坑——后台眼里的页面

        终于忙完了第一期的项目,虽然结果是好的,过程却是痛苦的。

        和前台的沟通是我开发时间的一半以上。最终放弃了vue.JS 因为要兼容ie 8, 放弃了页面静态化因为人手不够,竟然跳了Iframe的坑,幸好又跳出来的。接下来我要贴出一些和页面交互的东西。全是细节。有的可能很具体很简单我相信这些都会是经验积累的。从这我也下定决心加一层Node.js做一次完全前后分离的尝试。过几天实验成功后贴出。

参考了不少网大神资源:

http://www.cnblogs.com/zikai/p/5074686.html  
http://www.cnblogs.com/wsw0515/p/3582627.html 
http://www.oschina.net/question/917732_106601 
http://jxd-zxf.iteye.com/blog/2072300 
http://www.tashan10.com/jquery-jiang-biao-dan-xu-lie-hua-wei-jsondui-xiang/                                  

  • 405 (Method Not Allowed) 请求方式错误; ajax 请求和 controller 接受限制不一样;

//js代码
$.ajax({
            type : 'GET',
            url : '<%=basePath%>getDemo?id=' + treeNode.id + '&random=' + Math.random(),
            success : function(data) {}       
        });

//controller代码
@RequestMapping(value = "getDemo", method = RequestMethod.GET)
    public String getDemo(String id) {
        return null;
    }
  •  HTML 编码和解码 

//HTML 编码和解码
    function HTMLEncode(html) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = html)
                : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }
    function HTMLDecode(text) {
        var temp = document.createElement("div");
        temp.innerHTML = text;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
    }
  • 获取css背景图片url 不带('url ')的方式

var backgroundImage = $(".home-design1").css('background-image').split("\"")[1];
  • HTML5教程之本地存储SessionStorage

SessionStorage:
将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。
此对象主要有两个方法:
保存数据:sessionStorage.setItem(Key, value);
读取数据:sessionStorage.getItem(Key);
Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。
使用方法:
保存数据:sessionStorage.setItem("website", "W3Cfuns.com");
读取数据:sessionStorage.getItem("website");
  • 将Json对象序列化成Json字符串提交,以List接收 

//HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd"><html><head>
    <title>submitUserList_4</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script language="JavaScript" src="/js/jquery.min.js" ></script>
    <script type="text/javascript" language="JavaScript">
        //将表单序列化成json格式的数据(但不适用于含有控件的表单,例如复选框、多选的select)
        (function($){
            $.fn.serializeJson = function(){
                var jsonData1 = {};
                var serializeArray = this.serializeArray();
                // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
                $(serializeArray).each(function () {
                    if (jsonData1[this.name]) {
                        if ($.isArray(jsonData1[this.name])) {
                            jsonData1[this.name].push(this.value);
                        } else {
                            jsonData1[this.name] = [jsonData1[this.name], this.value];
                        }
                    } else {
                        jsonData1[this.name] = this.value;
                    }
                });
                // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
                var vCount = 0;
                // 计算json内部的数组最大长度
                for(var item in jsonData1){
                    var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
                    vCount = (tmp > vCount) ? tmp : vCount;
                }

                if(vCount > 1) {
                    var jsonData2 = new Array();
                    for(var i = 0; i < vCount; i++){
                        var jsonObj = {};
                        for(var item in jsonData1) {
                            jsonObj[item] = jsonData1[item][i];
                        }
                        jsonData2.push(jsonObj);
                    }
                    return JSON.stringify(jsonData2);
                }else{
                    return "[" + JSON.stringify(jsonData1) + "]";
                }
            };
        })(jQuery);

        function submitUserList_4() {alert("ok");
            var jsonStr = $("#form1").serializeJson();
            //console.log("jsonStr:\r\n" + jsonStr);
            //alert(jsonStr);
            $.ajax({
                url: "/user/submitUserList_4",
                type: "POST",
                contentType : 'application/json;charset=utf-8', //设置请求头信息
                dataType:"json",
                data: jsonStr,
                success: function(data){
                    alert(data);
                },
                error: function(res){
                    alert(res.responseText);
                }
            });
        }
    </script></head>

<body>
    <h1>submitUserList_4</h1>
    <form id="form1">
        ID:<input type="text" name="id"><br/>
        Username:<input type="text" name="name"><br/>
        Password:<input type="text" name="pwd"><br/><br/>

        ID:<input type="text" name="id"><br/>
        Username:<input type="text" name="name"><br/>
        Password:<input type="text" name="pwd"><br/><br/>
        <input type="button" value="submit" onclick="submitUserList_4();">
    </form></body></h

//Java代码:
    @RequestMapping(value = "/submitUserList_4", method ={RequestMethod.POST})
    @ResponseBody
    public String submitUserList_4(@RequestBody List<User> users)
            throws Exception{
        String result = "";
        if(users == null || users.size() <= 0){ return "No any ID.中文"; }
        result = this.showUserList(users);
        return result;
    }
  • jquery 禁止回车事件响应 

$(this).keydown( function(e) {
    var key = window.event?e.keyCode:e.which;
    if(key.toString() == "13"){
        return false;
    }
});

  • 重定向用<c:if test="${message != null}"></c:if> 提示错误信息 

<c:if test="${message !=null}"><div class = "login-valid">${message }</div></c:if>
  • ajax发送json乱码

//HTML
encodeURI($(dom).val(), "UTF-8");    
//JAVA
try{ String decode = URLDecoder.decode(jsonString, "utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
  •  Jquery的扩展方法发送json

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
 
那么合并后的结果

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。
$.ajax({
                    type: 'POST',
                    url: '<%=basePath%>/getCode',
                      data:$.extend(code1,code2),
                      success:function(data) {
                  
                      },
                      
                  });
  •  异步返回各种格式

package com.utils;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

/**
 * 异步返回各种格式
 */
public class ResponseUtils {

	//发送内容  
	public static void render(HttpServletResponse response,String contentType,String text){
		response.setContentType(contentType);
		try {
			response.getWriter().write(text);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	//发送的是JSON
	public static void renderJson(HttpServletResponse response,String text){
		render(response, "application/json;charset=UTF-8", text);
	}
	//发送xml
	public static void renderXml(HttpServletResponse response,String text){
		render(response, "text/xml;charset=UTF-8", text);
	}
	//发送text
	public static void renderText(HttpServletResponse response,String text){
		render(response, "text/plain;charset=UTF-8", text);
	}
	
	
}
  @RequestMapping("/demo")
  public void getRoomType(HttpServletResponse response, HttpServletRequest request) {
 
                    JSONObject josnObject = new JSONObject();
                    josnObject.put("code1",code1 );
                    ResponseUtils.renderJson(response, josnObject.toString());
                
                }

 

© 著作权归作者所有

Lien6o
粉丝 15
博文 36
码字总数 29498
作品 0
海淀
程序员
私信 提问
东航电商前端技术周刊第五期20180724

今天我们将分享如下内容,希望能对小伙伴们有些许帮助: 1、通过改变类名渲染不同背景图的简洁写法; 2、项目中常会用到的点击弹出模态框禁止页面滑动; 3、axios post提交的Content-Type设置...

东航电商前端技术中心
2018/07/24
0
0
前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方
2018/01/08
0
0
GO学习第五天——页面显示数据

又隔了几天没有写博文了。这次就记录一下在GO的Web应用中,页面显示数据吧。 首先,写GO Web的页面和普通html不同的就是本地资源的src。 <link rel="stylesheet" type="text/css" href="../......

leaf志良
2013/11/09
0
1
微信支付2016开发调试过程记录

最近换了家公司,因为以前也是做支付的来这个公司直接让我从零开始搭建支付服务。首先是微信支付宝的第三方接入。我是做java开发的。支付宝有接入的sdk就是一个jar包。而且有沙箱环境测试帐号...

挨踢人生
2016/11/15
0
0
在多好三个月的前端开发经验

这是我的第二家实习公司,在这里实习三个月收获颇丰,总结+纪念一下 一、移动端的常用插件 Zepto.js:移动端的jquery Bug:穿透bug Fastclick.js:重写click为tap事件,解决zepto的穿透bug 开...

hyh2015
2016/08/19
70
0

没有更多内容

加载失败,请刷新页面

加载更多

group by分组后获得每组中时间最大的那条记录

用途: GROUP BY 语句用于 对一个或多个列对结果集进行分组。 例子: 原表: 现在,我们希望根据USER_ID 字段进行分组,那么,可使用 GROUP BY 语句。 我们使用下列 SQL 语句: SELECT ID,US...

豆花饭烧土豆
33分钟前
0
0
android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
44分钟前
2
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
55分钟前
2
0
分布式数据一致性

狼王黄师傅
今天
2
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部