前端页面使用

基础

• 跳转到controller 中时，其路径使用相对路径，路径开头前加“/”，使其相对于根路径开始
  1. 不添加“/”时，会相对于当前路径，导致无法跳转到对应的controller
• 组件不可编辑时，使用readonly="readonly"属性，使用disable时会导致该组件无法被js编辑，form表单提交时值也不会传递
• js 基础
  1. ==和===的区别,两个等号 先比较类型 类型想同再进行三等号比较，若类型不同，会尝试一次类型转换
  2. === 类型不同直接错误
  3. Boolean 值 0 false，非0(包括负值) true；空字符串 false ，其他 true；

jquery使用

基础

• js执行顺序
• 页面加载完后执行
  1. 简单方式$(function() {});
  2. 复杂方式：$(document).ready(function() { };
• 获取元素（可以使用单引号和双引号）
  1. $(’#myId’) ID选择器： 可以获取到ID为“myId”的元素，区分大小写；
  2. $(’.myClass’) 类选择器：可以获取到class为‘myClass’的所有元素；
• 元素对应的事件
  1. 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。如click()等;
  2. 使用标签本身含有的事件，如onclick 等，其值中添加js 函数及参数；函数要提前写好
  3. 事件 ，在html 标签中一般为onXXX();在jq中，对应事件去掉on，为XXX()形式；
  4. 例子

//标签方式
<span onclick="categoryTree('children')"></span>
//js方式
$("p").click();
$("p").click(function(){
    // 动作触发后执行的代码!!
});

• 获取元素的值
  1. 一般可以使用 input ，textarea 都可用：$(" #test ").val()
• 遍历操作
  1. 使用$.each();方式进行遍历，传入，数据集合，和函数 function（k,v)；
  2. 对于匿名函数 function（k,v) ，若为map结构，则k为集合key，v 为集合值；若为数组链表，则k为下标，v为具体值
  3. 代码

 var role = $("#user-role");
 $.each(d, function (k, v) {
        role.append("<option value=" + v + ">" + v + "</option>")
                        });

• textArea

操作

Ajax 请求

• 代码：

$("button").click(function(){
   $.ajax({
					url: "/blogController/saveBlog",
					type: "post",
					data: {
						content:$("#content").val(),
					},
					success: function(data) {
						var flag = data.flag;
					}
				});
				//over
});

• 详细参数链接

ajax 跨域

cros方式

• 介绍
  1. 请求分为简单请求（simple request）和非简单请求（not-so-simple request）
  2. 具体介绍
  3. 非简单请求会发起两次请i去 option和真正请求
  4. option请求发起的Access-Control-Request-Headers: 中值为请求中header的值，存在自定义header时，会被添加，浏览器需要全部覆盖这些值
  5. 真正的请求中，普通情况下返回Access-Control-Allow-Origin请求头即可
  6. 当请求中需要携带cookie时，请求体增加 withCredentials: true ,真正请求的响应头中需要增加Access-Control-Allow-Credentials
  7. 如果跨域，请去头中不会含有X-Requested-With: XMLHttpRequest；（包括简单请求和非加拿大请求）
  8. option请求中不会携带自定义的请求头
  9. 当请求方式为简单请求时，
  1. 可以通过自定义header的方式添加对应请求头，但同时请求也会变成非简单请求
  2. crossDomain (default: false for same-domain requests, true for
     cross-domain requests)
  3. 跨域时，crossDomain默认为true；此时，可以手动设置其为false，会自动添加上X-Requested-With: XMLHttpRequest 请求头；但此时，会变成非简单请求；

$.ajax({
			url: "http://openproxy.liepin.com/ding/getloginticket4internal.json?program=DING_ENTERPRISE_TONGDAO&corpId=wwf&dingUserId=aq&_unionId",
			type: "post",
			//crossDomain: true,
			//可用于替换header方式
			headers: {
				'ested-With':"XMLHttpRequest",
				},
			xhrFields: {
				withCredentials: true//携带cookie，真正的请求中，也要返回相关请求头
			},
			data: {
				content: $("#content").val(),
			},
			success: function (data) {
				console.log(data)
				var flag = data.flag;
				if(flag){
				}
			}
		});

jsonp

• 介绍
  1. 通过script的方式，通过src方式发起跨域请求；
• 基础方式：
  1. 前端定义函数
  2. 后端在响应体中，内容格式为调用前端喊出，并将内容作为函数参数
• jquery方式：
  1. 会自动封装sucess作为回调方法，函数名可以自定义

 $.ajax({
             type: "get",
             async: false,
             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
             },
             error: function(){
                 alert('fail');
             }
         });

下拉选择框动态设置元素

• <select> 标签：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

• 使用
  1. html 页面 设置<select> 标签，其中不设置<option>标签；<select> 设置唯一id
  2. 页面加载完成后；jq 发起ajax 请求；请求成功动态遍历数据集合添加<option>标签
  3. 代码

 $(function () {
            $.ajax({
                url: "/personalController/getRole",
                type: "post",
                data: {},
                success: function (data) {
                    let flag = data.flag;
                    if (flag) {
                        var d = data.data;
                        var role = $("#user-role");
                        $.each(d, function (k, v) {
                            role.append("<option value=" + v + ">" + v + "</option>")
                        });
                    }
                }
            });
            //over
        });

下拉框选中事件处理

• 一般监听change事件，选中状态改变时触发
• 获取当前选中的值
  1. $("#" + thisId).children('option:selected').val()

form表单