Web学习内容

WEB

AJAX

异步的JavaScript和AXML

1. JQuery实现AJAX
   $.ajax({
   url: “http://www.hzhuti.com”, //请求的url地址
   dataType: “json”, //返回格式为json
   async: true, //请求是否异步，默认为异步，这也是ajax重要特性
   data: {
   “id”: “value”
   }, //参数值
   type: “GET/POST”, //请求方式
   (get:请求参数长度<=2048字符，请求参数在URL中，post通过request body传递参数)
   beforeSend: function() {
   //请求前的处理
   },
   success: function(req) {
   //请求成功时处理，一般只用到这一个
   },
   complete: function() {
   //请求完成的处理
   },
   error: function() {
   //请求出错处理
   }
   });
   两种提交方式比较：
   get()和post()两种基本请求方式的区别：
   （a)、直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
   （b)、长的说：对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
   ©、GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
   (d)、GET请求在URL中传送的参数是有长度限制的，而POST没有。
   (e)、GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
   (f)、post会有浏览器提示重新提交表单的问题，get则没有
   (e). get 方式：url?name1=value1&name2=value2
   编码：由于URL无法识别特殊字符，所以如果数据中包含特殊字符(如中文)，则需要使用 encodeURIComponent() 进行编码
   var url = ‘test.php’ +’?name=’ + encodeURIComponent(“小火柴”);

2. 核心步骤
   通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
   A. 创建XMLHttpRequest对象
   B.向服务器发送数据，一般有两种方法，open()，send()
   C.发送(异步)请求
   D.接收相应请求，并执行回调，相应数据

3. onreadystatechange:储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
   readyState: 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
   0: 请求未初始化
   1: 服务器连接已建立
   2: 请求已接收
   3: 请求处理中
   4: 请求已完成，且响应已就绪
   status:200: “OK” ； 404: 未找到页面
   根据后端数据将复选框勾选
   example
   根据后端数据单选框勾选

JQuery

1. 写法

$(document).ready(function(){
  //开始写jQuery代码
  $("p").click(function(){
    $(this).hide();
  });
});

简写：

$(function(){
   // 开始写 jQuery 代码...
});

$.each(){}

是对数组，json和dom结构等的遍历，
(1).遍历一维数组

 var arr1=['aa','bb','cc','dd'];
 $.each(arr1,function(i,val){ 
 //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+'`````'+val);
 }

(2).遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ 
//两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
 console.log(i+'````'+item);

(3).处理对象

 var json1={key1:'a',key2:'b',key3:'c'};
 $.each(json1,function(key,value){  //遍历键值对
            console.log(key+'````'+value);
  })

(4).处理json数组

 var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
        $.each(arr3,function(i,val){
            console.log(i+'`````'+val);   
　　　　//输出
　　　　/* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/
            console.log(val.name); //获取每一个json里面的name值
            console.log(val["name"]);
            $.each(val,function(key,val2){
                console.log(key+'```'+val2);
            })
        });

(5).处理dom元素(html标签元素）

$(selector).html(***);

****：加入HTML内容

$(selector).select2()

提供下拉选框功能

EasyUI

1. 动态加载数据时，防止复制，粘贴
   搞了半天，加错div了，……

方式一：
onselectstart="return false"   可加在<div>中
方式二：
在详情页面时，加在tbody标签里，第一种加在<tbody>或<div>中不好用
oncontextmenu="event.returnValue=false" 				     onselectstart="event.returnValue=false" ，
上述方式。可防止右键粘贴，复制
当在详情页面里，用快捷键的时候，Ctrl+C ,Ctrl+V的时候，仍然可以，所以加如下js代码
<script>
 document.onkeydown = function(){
     if (event.ctrlKey && window.event.keyCode==67){
     return false;
     }
    }
</script>

2. 从后端返回数据给前端，判空

formatterValue : function(value) {
				if (undefined == value || null == value) {
					return '否';
				}
				return '是';
			},

3. 可以使用console.log(value)。可以对返回的数据进行控制台输出
   第一次结果为undifined ，应该是所有元素的预加载，还没有真正开始取值
   [一个未初始化的变量的值为undefined,一个没有传入实参的形参变量的值为undefined,如果一个函数什么都不返回,则该函数默认返回undefined.]
4. 脱敏值SQL设置：

手机号
replace(a.telephone,substr(a.telephone,4,4),'****') AS telephone
身份证号码
replace(a.cert_no,substr(a.cert_no,7,8),'****') AS certNo
一般账号
replace(a.cert_no,substr(a.cert_no,7,8),'****') AS certNo
姓名
REPLACE(b.cust_name,SUBSTR(b.cust_name,2,1),'*')

Excel导出

导出Excel表格时，身份证，性别，是否阅读某协议的判断都要在sql里设置
且在导出Excel表格的时候，前端传到后端的数据，如带有汉字，需要转码，因为用了ｕｒｌ字符串拼接的方式
列表却不需要？why?
当ｅａｓｙＵＩ用ｕｒｌ字符串拼接的时候，中文也会乱码，这个时候需要改写成用queryParams参数传递参数，会自动转码

SELECT f.content sex,
		<!-- 	a.is_read isRead, -->
		CASE a.is_read  WHEN '0' THEN '否'
         WHEN '1' THEN '是' END as isRead,
		CASE  WHEN a.user_id is not null THEN '是'
		ELSE '否' END as qrcodeUserId
		from
		TableName

改进：获取复选框选中的数据进行导出，此时由于数据量可能过大，需要将提交方式改为post请求，且改成表单提交方式
参照表单提交
getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。
getSelections：取得所有选中行数据，返回元素记录的数组数据。
getChecked：取得checkbox选择行（勾选行）的数据，返回元素记录的数组数据。
getSelected跟getSelections是选中行，而且getChecked是选择行，也叫勾选行。

var checkedCustNoList = new Array();
$.each(companyinfo.datagrid("getChecked"), function(index, row) {
				checkedCustNoList.push(row.custNo);
			});

目前是：当前端传递的参数为列表或数组的时候，用join(",")拼接成字符串传递给后端
后端用spilt(",");进行解析
参数传递中文乱码问题：不需要进行转码，直接传递和接收就行
但这种方式在当前项目的测试环境，由于编码与本地不一致，导致乱码问题，需要在后端重编码：

appCustInfoVO.setUserName(new String(appCustInfoVO.getUserName().getBytes("ISO-8859-1"), "UTF-8"));

post请求下载Excel表

CSS

<style>
input:checked + span {
        color: #FF0000;
}
.radioClass{vertical-align:-3px;}
</style>

说明：第一个样式，是对input中type=radio/checkbox，选中的元素紧接着的文字内容进行样式设置
第二个样式：是对文本内容无法与type=radio的< input>标签在同一水平线上的解决办法

JS

<script src="js/familyQuestionnaire.js?v=<%=System.currentTimeMillis()%>"></script>
避免清楚缓存，可实时更新

ECMAScript

1. 变量命名：开头字母，下划线，$。其后除三种外可添加数字