在jquery中，让ajax执行完后再往下执行将async设置为false即可
var id ="";
var no = "${no}";
//***//
var msg;
$.ajax({
type:"post",
url:"ajaxAction.action",
async:false,//设置同步/异步的参数[true异步 false同步]
data:{"id":id,"no":no},
dataType:"text",
success:function(data){
msg=data;
alert("data"+data);
},
error:function(e){
msg=e;
}
});
alert("msg"+msg);//输出成功
if(msg=="success"){
return true;
}else{
return false;
}
JS中的async/await的用法和理解
1、首先需要理解async 和 await的基本含义
async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数
// 0. async基础用法测试
async function fun0() {
console.log(1)
return 1
}
fun0().then( x => { console.log(x) }) // 输出结果 1， 1，
async function funa() {
console.log('a')
return 'a'
}
funa().then( x => { console.log(x) }) // 输出结果a， a，
async function funo() {
console.log({})
return {}
}
funo().then( x => { console.log(x) }) // 输出结果 {} {}
async function funp() {
console.log('Promise')
return new Promise(function(resolve, reject){
resolve('Promise')
})
}
funp().then( x => { console.log(x) }) // 输出promise promise
await 也是一个修饰符，
await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理
// await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
// 如果await 后面并不是一个Promise的返回值，则会按照同步程序返回值处理,为undefined
const bbb = function(){ return 'string'}
async function funAsy() {
const a = await 1
const b = await new Promise((resolve, reject)=>{
setTimeout(function(){
resolve('time')
}, 3000)
})
const c = await bbb()
console.log(a, b, c)
}
funAsy() // 运行结果是 3秒钟之后 ，输出 1， time , string,
// 2.如果不使用promise的方法的话
function log2(time) {
setTimeout(function(){
console.log(time)
return 1
}, time)
}
async function fun1() {
const a = await log2(5000)
const b = await log2(10000)
const c = log2(2000)
console.log(a)
console.log(1)
}
fun1()
// 以上运行结果为： 立刻输出undefined 立刻输出1 2秒后输出2000 5秒后输出5000 10秒后输出10000
2、那么由此看来async / await的综合用法如下
在这里插入代码片// 1.定义一个或多个普通函数，函数必须返回Promise对象，如果返回其他类型的数据，将按照普通同步程序处理
function log(time) {
return new Promise((resolve, reject)=> {
setTimeout(function(){
console.log(time)
resolve()
}, time)
})
}
async function fun() {
await log(5000)
await log(10000)
log(1000)
console.log(1)
}
fun()
// 3. async / await的重要应用
const asy = function(x, time) {
return new Promise((resolve, reject) =>{
setTimeout(()=>{
resolve(x)
}, time)
})
}
const add = async function() {
const a = await asy(3, 5000)
console.log(a)
const b = await asy(4, 10000)
console.log(b)
const c = await asy(5, 15000)
console.log(a,b,c)
const d = a + b +c
console.log(d)
}
add();
// 5秒后输出3 又10秒后输出4 又15秒后输出5 然后立刻输出3,4,5，然后输出12
在项目中有些逻辑或者请求依赖另一个异步请求，大家常用的方法是回调函数。现在有个高大上的解决方案：await async 。
async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。并且await 只能出现在 async 函数中，否则会报错。
async作用：
当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。
async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待 Promise 的结果出来，然后恢复async函数的执行并返回解析值（resolved）。
await作用：
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。
若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。
js中把字符串转换成number格式方法
方法主要有三种
转换函数、强制类型转换、利用js变量弱类型转换。
- 转换函数：
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。
一些示例如下：
复制代码代码如下:
parseInt(“1234blue”); //returns 1234
parseInt(“0xA”); //returns 10
parseInt(“22.5”); //returns 22
parseInt(“blue”); //returns NaN
parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的，示例如下：
复制代码代码如下:
parseInt(“AF”, 16); //returns 175
parseInt(“10”, 2); //returns 2
parseInt(“10”, 8); //returns 8
parseInt(“10”, 10); //returns 10
如果十进制数包含前导0，那么最好采用基数10，这样才不会意外地得到八进制的值。例如：
复制代码代码如下:
parseInt(“010”); //returns 8
parseInt(“010”, 8); //returns 8
parseInt(“010”, 10); //returns 10
parseFloat()方法与parseInt()方法的处理方式相似。
使用parseFloat()方法的另一不同之处在于，字符串必须以十进制形式表示浮点数，parseFloat()没有基模式。
下面是使用parseFloat()方法的示例：
复制代码代码如下:
parseFloat(“1234blue”); //returns 1234.0
parseFloat(“0xA”); //returns NaN
parseFloat(“22.5”); //returns 22.5
parseFloat(“22.34.5”); //returns 22.34
parseFloat(“0908”); //returns 908
parseFloat(“blue”); //returns NaN
- 强制类型转换
还可使用强制类型转换（type casting）处理转换值的类型。使用强制类型转换可以访问特定的值，即使它是另一种类型的。
ECMAScript中可用的3种强制类型转换如下：
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
用这三个函数之一转换值，将创建一个新值，存放由原始值直接转换成的值。这会造成意想不到的后果。
当要转换的值是至少有一个字符的字符串、非0数字或对象（下一节将讨论这一点）时，Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null，它将返回false。
可以用下面的代码段测试Boolean型的强制类型转换。
复制代码代码如下:
Boolean(""); //false – empty string
Boolean(“hi”); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。示例如下：
复制代码代码如下:
用 法 结 果
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
最后一种强制类型转换方法String()是最简单的，示例如下：
复制代码代码如下:
var s1 = String(null); //“null”
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error
- 利用js变量弱类型转换
举个小例子，一看，就会明白了。
复制代码代码如下:
上例利用了js的弱类型的特点，只进行了算术运算，实现了字符串到数字的类型转换，不过这个方法还是不推荐的
ajax向后台发送JSON数据出现: Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported的错误。
Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported
使用post协议提交时，请检查Content type类型
请检查上方contentType类型，如果想用springmvc @RequestBody注解做提交json字符串自动绑定到pojo入参时，类型需要是"application/json;charset=UTF-8"，否则会抛"not supported"异常。
contentType: “application/json;charset=UTF-8”,
Js获取当前日期时间及其它操作，js时间函数
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
日期时间脚本库方法列表
Date.prototype.isLeapYear 判断闰年
Date.prototype.Format 日期格式化
Date.prototype.DateAdd 日期计算
Date.prototype.DateDiff 比较日期差
Date.prototype.toString 日期转字符串
Date.prototype.toArray 日期分割为数组
Date.prototype.DatePart 取日期的部分信息
Date.prototype.MaxDayOfDate 取日期所在月的最大天数
Date.prototype.WeekNumOfYear 判断日期所在年的第几周
StringToDate 字符串转日期型
IsValidDate 验证日期有效性
CheckDateTime 完整日期时间检查
daysBetween 日期天数差
js代码：
//—————————————————
// 判断闰年
//—————————————————
Date.prototype.isLeapYear = function()
{
return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));
}
//—————————————————
// 日期格式化
// 格式 YYYY/yyyy/YY/yy 表示年份
// MM/M 月份
// W/w 星期
// dd/DD/d/D 日期
// hh/HH/h/H 时间
// mm/m 分钟
// ss/SS/s/S 秒
//—————————————————
Date.prototype.Format = function(formatStr)
{
var str = formatStr;
var Week = ['日','一','二','三','四','五','六'];
str=str.replace(/yyyy|YYYY/,this.getFullYear());
str=str.replace(/yy|YY/,(this.getYear() % 100)>9?(this.getYear() % 100).toString():’0′ + (this.getYear() % 100));
str=str.replace(/MM/,this.getMonth()>9?this.getMonth().toString():’0′ + this.getMonth());
str=str.replace(/M/g,this.getMonth());
str=str.replace(/w|W/g,Week[this.getDay()]);
str=str.replace(/dd|DD/,this.getDate()>9?this.getDate().toString():’0′ + this.getDate());
str=str.replace(/d|D/g,this.getDate());
str=str.replace(/hh|HH/,this.getHours()>9?this.getHours().toString():’0′ + this.getHours());
str=str.replace(/h|H/g,this.getHours());
str=str.replace(/mm/,this.getMinutes()>9?this.getMinutes().toString():’0′ + this.getMinutes());
str=str.replace(/m/g,this.getMinutes());
str=str.replace(/ss|SS/,this.getSeconds()>9?this.getSeconds().toString():’0′ + this.getSeconds());
str=str.replace(/s|S/g,this.getSeconds());
return str;
}
//+—————————————————
//| 求两个时间的天数差 日期格式为 YYYY-MM-dd
//+—————————————————
function daysBetween(DateOne,DateTwo)
{
var OneMonth = DateOne.substring(5,DateOne.lastIndexOf (‘-’));
var OneDay = DateOne.substring(DateOne.length,DateOne.lastIndexOf (‘-’)+1);
var OneYear = DateOne.substring(0,DateOne.indexOf (‘-’));
var TwoMonth = DateTwo.substring(5,DateTwo.lastIndexOf (‘-’));
var TwoDay = DateTwo.substring(DateTwo.length,DateTwo.lastIndexOf (‘-’)+1);
var TwoYear = DateTwo.substring(0,DateTwo.indexOf (‘-’));
var cha=((Date.parse(OneMonth+’/'+OneDay+’/'+OneYear)- Date.parse(TwoMonth+’/'+TwoDay+’/'+TwoYear))/86400000);
return Math.abs(cha);
}
//+—————————————————
//| 日期计算
//+—————————————————
Date.prototype.DateAdd = function(strInterval, Number) {
var dtTmp = this;
switch (strInterval) {
case ‘s’ :return new Date(Date.parse(dtTmp) + (1000 * Number));
case ‘n’ :return new Date(Date.parse(dtTmp) + (60000 * Number));
case ‘h’ :return new Date(Date.parse(dtTmp) + (3600000 * Number));
case ‘d’ :return new Date(Date.parse(dtTmp) + (86400000 * Number));
case ‘w’ :return new Date(Date.parse(dtTmp) + ((86400000 * 7) * Number));
case ‘q’ :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number*3, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case ‘m’ :return new Date(dtTmp.getFullYear(), (dtTmp.getMonth()) + Number, dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
case ‘y’ :return new Date((dtTmp.getFullYear() + Number), dtTmp.getMonth(), dtTmp.getDate(), dtTmp.getHours(), dtTmp.getMinutes(), dtTmp.getSeconds());
}
}
//+—————————————————
//| 比较日期差 dtEnd 格式为日期型或者有效日期格式字符串
//+—————————————————
Date.prototype.DateDiff = function(strInterval, dtEnd) {
var dtStart = this;
if (typeof dtEnd == ‘string’ )//如果是字符串转换为日期型
{
dtEnd = StringToDate(dtEnd);
}
switch (strInterval) {
case ‘s’ :return parseInt((dtEnd – dtStart) / 1000);
case ‘n’ :return parseInt((dtEnd – dtStart) / 60000);
case ‘h’ :return parseInt((dtEnd – dtStart) / 3600000);
case ‘d’ :return parseInt((dtEnd – dtStart) / 86400000);
case ‘w’ :return parseInt((dtEnd – dtStart) / (86400000 * 7));
case ‘m’ :return (dtEnd.getMonth()+1)+((dtEnd.getFullYear()-dtStart.getFullYear())*12) – (dtStart.getMonth()+1);
case ‘y’ :return dtEnd.getFullYear() – dtStart.getFullYear();
}
}
//+—————————————————
//| 日期输出字符串，重载了系统的toString方法
//+—————————————————
Date.prototype.toString = function(showWeek)
{
var myDate= this;
var str = myDate.toLocaleDateString();
if (showWeek)
{
var Week = ['日','一','二','三','四','五','六'];
str += ‘ 星期’ + Week[myDate.getDay()];
}
return str;
}
//+—————————————————
//| 日期合法性验证
//| 格式为：YYYY-MM-DD或YYYY/MM/DD
//+—————————————————
function IsValidDate(DateStr)
{
var sDate=DateStr.replace(/(^\s+|\s+$)/g,”); //去两边空格;
if(sDate==”) return true;
//如果格式满足YYYY-(/)MM-(/)DD或YYYY-(/)M-(/)DD或YYYY-(/)M-(/)D或YYYY-(/)MM-(/)D就替换为”
//数据库中，合法日期可以是:YYYY-MM/DD(2003-3/21),数据库会自动转换为YYYY-MM-DD格式
var s = sDate.replace(/[\d]{ 4,4 }[\-/]{ 1 }[\d]{ 1,2 }[\-/]{ 1 }[\d]{ 1,2 }/g,”);
if (s==”) //说明格式满足YYYY-MM-DD或YYYY-M-DD或YYYY-M-D或YYYY-MM-D
{
var t=new Date(sDate.replace(/\-/g,’/'));
var ar = sDate.split(/[-/:]/);
if(ar[0] != t.getYear() || ar[1] != t.getMonth()+1 || ar[2] != t.getDate())
{
//alert(‘错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。’);
return false;
}
}
else
{
//alert(‘错误的日期格式！格式为：YYYY-MM-DD或YYYY/MM/DD。注意闰年。’);
return false;
}
return true;
}
//+—————————————————
//| 日期时间检查
//| 格式为：YYYY-MM-DD HH:MM:SS
//+—————————————————
function CheckDateTime(str)
{
var reg = /^(\d+)-(\d{ 1,2 })-(\d{ 1,2 }) (\d{ 1,2 }):(\d{ 1,2 }):(\d{ 1,2 })$/;
var r = str.match(reg);
if(r==null)return false;
r[2]=r[2]-1;
var d= new Date(r[1],r[2],r[3],r[4],r[5],r[6]);
if(d.getFullYear()!=r[1])return false;
if(d.getMonth()!=r[2])return false;
if(d.getDate()!=r[3])return false;
if(d.getHours()!=r[4])return false;
if(d.getMinutes()!=r[5])return false;
if(d.getSeconds()!=r[6])return false;
return true;
}
//+—————————————————
//| 把日期分割成数组
//+—————————————————
Date.prototype.toArray = function()
{
var myDate = this;
var myArray = Array();
myArray[0] = myDate.getFullYear();
myArray[1] = myDate.getMonth();
myArray[2] = myDate.getDate();
myArray[3] = myDate.getHours();
myArray[4] = myDate.getMinutes();
myArray[5] = myDate.getSeconds();
return myArray;
}
//+—————————————————
//| 取得日期数据信息
//| 参数 interval 表示数据类型
//| y 年 m月 d日 w星期 ww周 h时 n分 s秒
//+—————————————————
Date.prototype.DatePart = function(interval)
{
var myDate = this;
var partStr=”;
var Week = ['日','一','二','三','四','五','六'];
switch (interval)
{
case ‘y’ :partStr = myDate.getFullYear();break;
case ‘m’ :partStr = myDate.getMonth()+1;break;
case ‘d’ :partStr = myDate.getDate();break;
case ‘w’ :partStr = Week[myDate.getDay()];break;
case ‘ww’ :partStr = myDate.WeekNumOfYear();break;
case ‘h’ :partStr = myDate.getHours();break;
case ‘n’ :partStr = myDate.getMinutes();break;
case ‘s’ :partStr = myDate.getSeconds();break;
}
return partStr;
}
//+—————————————————
//| 取得当前日期所在月的最大天数
//+—————————————————
Date.prototype.MaxDayOfDate = function()
{
var myDate = this;
var ary = myDate.toArray();
var date1 = (new Date(ary[0],ary[1]+1,1));
var date2 = date1.dateAdd(1,’m',1);
var result = dateDiff(date1.Format(‘yyyy-MM-dd’),date2.Format(‘yyyy-MM-dd’));
return result;
}
//+—————————————————
//| 取得当前日期所在周是一年中的第几周
//+—————————————————
Date.prototype.WeekNumOfYear = function()
{
var myDate = this;
var ary = myDate.toArray();
var year = ary[0];
var month = ary[1]+1;
var day = ary[2];
document.write(‘< script language=VBScript\> \n’);
document.write(‘myDate = Datue(”+month+’-'+day+’-'+year+”) \n’);
document.write(‘result = DatePart(‘ww’, myDate) \n’);
document.write(‘ \n’);
return result;
}
//+—————————————————
//| 字符串转成日期类型
//| 格式 MM/dd/YYYY MM-dd-YYYY YYYY/MM/dd YYYY-MM-dd
//+—————————————————
function StringToDate(DateStr)
{
var converted = Date.parse(DateStr);
var myDate = new Date(converted);
if (isNaN(myDate))
{
//var delimCahar = DateStr.indexOf(‘/’)!=-1?’/':’-';
var arys= DateStr.split(‘-’);
myDate = new Date(arys[0],–arys[1],arys[2]);
}
return myDate;
}
若要显示:当前日期加时间(如:2009-06-12 12:00)
function CurentTime()
{
var now = new Date();
var year = now.getFullYear(); //年
var month = now.getMonth() + 1; //月
var day = now.getDate(); //日
var hh = now.getHours(); //时
var mm = now.getMinutes(); //分
var clock = year + “-”;
if(month < 10)
clock += “0″;
clock += month + “-”;
if(day < 10)
clock += “0″;
clock += day + ” “;
if(hh < 10)
clock += “0″;
clock += hh + “:”;
if (mm < 10) clock += ’0′;
clock += mm;
return(clock);
}
加减框
<div style="width: 160px">
<input style="width: 50px; height: 38px; border: 2px white; float: left;" type="button" value="-" onclick="reductionOf(this)" />
<input style="text-align: center; width: 50px; height: 32px; float: left;" type="text" value="1" onblur="checkNumber(this)" />
<input style="width: 50px; height: 38px; border: 2px white;" type="button" value="+" onclick="add(this)" />
</div>
//减数量
function reductionOf(obj) {
//减前判断
if ($(obj).next().val() == '') {
$(obj).next().val(1);
}
$(obj).next().val(parseInt($(obj).next().val()) - 1);//数值减
$(obj).next().val($(obj).next().val());//赋值给框
};
//加数量
function add(obj) {
//加前判断
if ($(obj).prev().val() == '') {
$(obj).prev().val(1);
}
$(obj).prev().val(parseInt($(obj).prev().val()) + 1);//数值加
$(obj).prev().val($(obj).prev().val());//赋值给框
};
//校验数字格式（只能输入正整数）
function checkNumber(obj) {
var reg = /^[1-9]\d*$/;
if(!reg.test($(obj).val()) || $(obj).val()==''){
$(obj).val(1);
}
}
vue 或者iview的框架里有个方法：需要刷线当前组件页面，不用刷线整个页面：网上有很多方法，但是不好使，都是刷新整个页面的方法，最终自己找到了方法，很好用：
vue实现无刷新加载数据，使用的技术是依赖注入 关键字为provide inject
在App.vue中
然后在需要使用这个方法的的vue组件中注入这个方法
data(){},
inject:[“reload”]
//然后在你想要使用的地方 使用就可以了
this.reload()
开发过程中，经常需要全局设置，许多前端开发时容易忽略请求头的配置，常用的请求头有2种：
axios.defaults.timeout = 15000; //超时响应
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’; // 配置请求头（推荐）
// axios.defaults.headers.post[‘Content-Type’] = ‘application/json;charset=utf-8’; // 配置请求头
axios.defaults.baseURL = $core.use(‘http’); //确认协议和地址
axios.defaults.withCredentials = true; // axios 默认不发送cookie，需要全局设置true发送cookie
一：get请求
axios中常见的get/delete请求，也称作query请求：
//一般发送请求是这么写（不推荐）：
axios.get(’/user?id=12345&name=user’)
.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
//但是为了方便全局统一调用封装的axios，我一般采用（推荐）
axios.get(’/user’, { //params参数必写 , 如果没有参数传{}也可以
params: {
id: 12345，
name: user
}
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
二：post/put/patch请求
传参方式大致用的有3种
(1) ‘Content-Type’= ‘multipart/form-data’
传参格式为 formData
（全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’）
（request的Header:‘Content-Type’= ‘multipart/form-data’）
var formData=new FormData();
formData.append(‘user’,123456);
formData.append(‘pass’,12345678);
axios.post("/notice",formData)
.then((res) => {return res})
.catch((err) => {return err})
image.png
(2) ‘Content-Type’= ‘application/x-www-form-urlencoded’
传参格式为 query 形式,使用
q
s
.
s
t
r
i
n
g
i
f
y
（
全
局
请
求
头
:
′
C
o
n
t
e
n
t
−
T
y
p
e
′
=
′
a
p
p
l
i
c
a
t
i
o
n
/
x
−
w
w
w
−
f
o
r
m
−
u
r
l
e
n
c
o
d
e
d
′
）
（
r
e
q
u
e
s
t
的
H
e
a
d
e
r
:
′
C
o
n
t
e
n
t
−
T
y
p
e
′
=
′
a
p
p
l
i
c
a
t
i
o
n
/
x
−
w
w
w
−
f
o
r
m
−
u
r
l
e
n
c
o
d
e
d
′
）
i
m
p
o
r
t
a
x
i
o
s
f
r
o
m
′
a
x
i
o
s
′
i
m
p
o
r
t
q
s
f
r
o
m
′
Q
s
′
l
e
t
d
a
t
a
=
"
c
o
d
e
"
:
"
1234
"
,
"
n
a
m
e
"
:
"
y
y
y
y
"
;
a
x
i
o
s
.
p
o
s
t
(
‘
qs.stringify （全局请求头:'Content-Type'= 'application/x-www-form-urlencoded'） （request的Header:'Content-Type'= 'application/x-www-form-urlencoded'） import axios from 'axios' import qs from 'Qs' let data = {"code":"1234","name":"yyyy"}; axios.post(`
qs.stringify（全局请求头:′Content−Type′=′application/x−www−form−urlencoded′）（request的Header:′Content−Type′=′application/x−www−form−urlencoded′）importaxiosfrom′axios′importqsfrom′Qs′letdata="code":"1234","name":"yyyy";axios.post(‘{this.$url}/test/testRequest`,qs.stringify({
data
}))
.then(res=>{
console.log(‘res=>’,res);
})
(3) ‘Content-Type’= 'application/json
传参格式为 raw (JSON格式)
（全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’）
（request的Header:‘Content-Type’= ‘application/json;charset=UTF-8’）
//方法一：
import axios from ‘axios’
let data = {“code”:“1234”,“name”:“yyyy”};
axios.post(${this.$url}/test/testRequest,data)
.then(res=>{
console.log(‘res=>’,res);
})
//方法二：
var readyData=JSON.stringify({
id:1234,
name:user
});
axios.post("/notice",readyData)
.then((res) => {return res})
.catch((err) => {return err})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
</body>
</html>
<template>
<div style="width:800px">
<el-table :data="tableData" border row-key="id" align="left">
<el-table-column
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label"
>
</el-table-column>
</el-table>
<!-- pre:json数据格式化展示 -->
<pre style="text-align: left">
{{ dropCol }}
</pre>
<hr />
<pre style="text-align: left">
{{ tableData }}
</pre>
</div>
</template>
<script>
import Sortable from "sortablejs";
export default {
data() {
return {
col: [
{
label: "日期",
prop: "date"
},
{
label: "姓名",
prop: "name"
},
{
label: "地址",
prop: "address"
}
],
dropCol: [
{
label: "日期",
prop: "date"
},
{
label: "姓名",
prop: "name"
},
{
label: "地址",
prop: "address"
}
],
tableData: [
{
id: "1",
date: "2019-12-23",
name: "王小虎1",
address: "上海市普陀区金沙江路 100 弄"
},
{
id: "2",
date: "2019-12-22",
name: "王小虎2",
address: "上海市普陀区金沙江路 200 弄"
},
{
id: "3",
date: "2019-12-21",
name: "王小虎3",
address: "上海市普陀区金沙江路 300 弄"
},
{
id: "4",
date: "2019-12-20",
name: "王小虎4",
address: "上海市普陀区金沙江路 400 弄"
}
]
};
},
mounted() {
this.rowDrop();
this.columnDrop();
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
// 官网上的配置项,加到这里面来,可以实现各种效果和功能
animation: 150,
ghostClass: "blue-background-class",
onEnd({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
}
});
},
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex];
this.dropCol.splice(evt.oldIndex, 1);
this.dropCol.splice(evt.newIndex, 0, oldItem);
}
});
}
}
};
</script>
<style scoped></style>
// JS截取字符串可使用 substring()或者slice()
//
// 函数：substring()
// 定义：substring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。
// 功能：字符串截取，比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)
// 例子：
var src="images/off_1.png";
alert(src.substring(7,10));
//弹出值为：off
// 函数：substr()
// 定义：substr(start,length)表示从start位置开始，截取length长度的字符串。
// 功能：字符串截取
// 例子：
var src="images/off_1.png";
alert(src.substr(7,3));
//弹出值为：off
// 函数：split()
// 功能：使用一个指定的分隔符把一个字符串分割存储到数组
// 例子：
str="jpg|bmp|gif|ico|png";
arr=theString.split("|");
//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组
// 函数：John()
// 功能：使用您选择的分隔符将一个数组合并为一个字符串
// 例子：
var delimitedString=myArray.join(delimiter);
var myList=new Array("jpg","bmp","gif","ico","png");
var portableList=myList.join("|");
//结果是jpg|bmp|gif|ico|png
// 函数：indexOf()
// 功能：返回字符串中匹配子串的第一个字符的下标
var myString="JavaScript";
var w=myString.indexOf("v");//w will be 2
var x=myString.indexOf("S");//x will be 4
var y=myString.indexOf("Script");//y will also be 4
var z=myString.indexOf("key");//z will be -1
// 函数：lastIndexOf()
// 定义：lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值（与indexOf相反）
// 功能：返回字符串索引值
// 例子：
var src="images/off_1.png";
alert(src.lastIndexOf('/'));
alert(src.lastIndexOf('g'));
//弹出值依次为：6,15
// 补充：substr 和 substring方法的区别
// substr 方法
// 返回一个从指定位置开始的指定长度的子字符串。
// stringvar.substr(start [, length ])
// 参数
// stringvar
// 必选项。要提取子字符串的字符串文字或 String 对象。
// start
// 必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
// length
// 可选项。在返回的子字符串中应包括的字符个数。
// 说明
// 如果 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到 stringvar 的最后。
// 示例
// 下面的示例演示了substr 方法的用法。
function SubstrDemo(){
var s, ss; // 声明变量。
var s = "The rain in Spain falls mainly in the plain.";
ss = s.substr(12, 5); // 获取子字符串。
return(ss); // 返回 "Spain"。
}
// substring 方法
// 返回位于 String 对象中指定位置的子字符串。
// strVariable.substring(start, end)
// "String Literal".substring(start, end)
// 参数
// start
// 指明子字符串的起始位置，该索引从 0 开始起算。
// end
// 指明子字符串的结束位置，该索引从 0 开始起算。
// 说明
// substring 方法将返回一个包含从 start 到最后（不包含 end ）的子字符串的字符串。
// substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如， strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。
// 如果 start 或 end 为 NaN 或者负数，那么将其替换为0。
// 子字符串的长度等于 start 和 end 之差的绝对值。例如，在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。
// 示例
// 下面的示例演示了 substring 方法的用法。
function SubstringDemo(){
var ss; // 声明变量。
var s = "The rain in Spain falls mainly in the plain..";
ss = s.substring(12, 17); // 取子字符串。
return(ss); // 返回子字符串。
}
<template style="height: 100%">
<el-table
:data="this.tableDataList"
height="95%"
style="width: 100%"
:row-style="iRowStyle"
:cell-style="iCellStyle"
:header-row-style="iHeaderRowStyle"
:header-cell-style="iHeaderCellStyle"
:fit="true"
>
<el-table-column
prop="createTime"
label="创建时间"
width="120"
>
</el-table-column>
<el-table-column
prop="title"
label="文章标题"
min-width="400"
>
<template slot-scope="tableDataList">
<a :href="tableDataList.row.url"
target="_blank"
class="TestCSS">{{tableDataList.row.title}}
</a>
</template>
</el-table-column>
<el-table-column
prop="visitor"
label="访问量"
width="80"
>
</el-table-column>
<el-table-column
prop="jump"
label="查看"
width="50"
>
<template slot-scope="tableDataList">
<a :href="tableDataList.row.url"
target="_blank">查看
</a>
</template>
</el-table-column>
<el-table-column
prop="updateTime"
label="更新时间"
width="100"
>
</el-table-column>
</el-table>
</template>
7757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
