h5替換 alert toast ajax 請求 獨立函式封裝 複製可用

 h5替換 alert  toast  ajax 請求 獨立函式封裝  複製可用  

不想用框架的朋友可以用  精簡到極致

	//替換系統的 資訊框提示
	function msgShow(o){
		if(typeof o === "string") o={msg:o};
		var divc = document.createElement("div");
		divc.innerHTML = o.title;o.title = divc.innerHTML;
		divc.innerHTML = o.msg;o.msg = divc.innerHTML;
		var arr = 'msg,title'.split(',');
		for (var k in arr) if( o[arr[k]]  == "undefined")o[arr[k]]='';
		if(typeof o.fun !== "function")o.fun=function(){};
		var html_doc = `<div class="end_overflow" style="position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999999;
	background-color: rgba(0,0,0,0.5);
	overscroll-behavior: none;
	text-align: center;
	font-size: 16px;
	overflow-y: auto;
	">
		<div class="end_overflow" style="
		position: absolute;
		width: calc(100vw);
		top:0;
		left: 0;
		height: calc(100vh + 1px);
		z-index: -1;"></div>
		<div style="
		max-width: 300px;
		min-width: 150px;
		width: 50%;
		border-radius: 10px;
		background-color: #FFF;
		/* padding: 10px 0; */
		margin: 0 auto;
		margin-top: 30%;
		">
			<div style="padding: 10px 10px 0px 10px;width: 100%;font-size: 1.3rem; font-weight: 200;"><span >${o.title}</span></div>
			<div style="padding: 10px 10px 10px 10px;width: 100%;"><span >${o.msg}</span></div>
		
			<div style="width: 100%;height: 1px; background-color:  rgba(0,0,0,0.2);margin: 10px 0 0 0;"></div>
			<div style="color: dodgerblue; font-size: 1.3rem; padding: 10px 10px;width: 100%;pointer-events: auto;" onclick=";var aac=this.parentNode.parentNode.fun; this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);aac();"><span>ok</span></div>
		</div>
	</div>`;
		console.log(html_doc)
		divc.innerHTML = html_doc;
		divc.firstChild.fun=o.fun;
		document.body.appendChild(divc.firstChild)
	};

	//模仿安卓的 toast
	function toastShow(o) {
		if(typeof o === "string") o={'msg':o};
		var divc = document.createElement("div");
		if(typeof o.time == "undefined") o.time =3000;//消失時間 毫秒
		if(typeof o.s == "undefined") o.s =0.5;//過度動畫 時間秒
		var arr = 'msg'.split(',');
		for (var k in arr){
			if( typeof o[arr[k]]  == "undefined"){
				o[arr[k]] ='';
			}else{
				divc.innerHTML = o[arr[k]];
				o[arr[k]] = divc.innerHTML;
			}
		} 
		if(typeof o.fun !== "function")o.fun=function(){};
		var html_doc = `<div class="end_overflow" style="position: fixed;
	top:70%;
	left: 0;
	z-index: 999999999;
	text-align: center;
	font-size: 16px;

    width: 100%;
	color: #fff;
	opacity:0;
	transition: opacity ${o.s}s;
	">
		<div style="
		margin: 0 auto;
		background-color: rgba(0,0,0,0.75);
		width: 50%;
		border-radius: 5px;
		padding: 8px;
		">
		${o.msg}
		</div>
	</div>
		`;
		divc.innerHTML = html_doc;
		divc.firstChild.fun=o.fun;
		divc = document.body.appendChild(divc.firstChild);
		console.log(divc);
		setTimeout(function (){
			divc.style.opacity=1;
		}, 2);
		setTimeout(function () {
			setTimeout(function (){
				document.body.removeChild(divc);
			},o.s*1000);
			divc.style.opacity=0;
		}, o.time-(o.s*1000));
	}





document.querySelector("form").onsubmit=function () {
    var data = new FormData(this);
    var url = this.getAttribute('action');

    //GET請求
    ajax(url,function (data) {
        msgShow(data);
    })

    //POST請求例子
    ajax({
        'url':url,
        'type':'POST',
        'data':data,//data-form 格式提交  JSON自己轉換一下
    },function (data) {
        msgShow(data);
    })
}

function ajax(o,fun) {
    if(typeof o === "string") o={'url':o};
    if(typeof o.fun !== "undefined") fun=o.fun;
    if(typeof fun == "undefined") o.fun=function(){};
    if(typeof o.type == "undefined") o.type="GET";
    if(typeof o.data == "undefined") o.data="";
    if(typeof o.url == "undefined") o.url="";
    var s=new XMLHttpRequest();
    s.onreadystatechange=function () {
        if(s.readyState === XMLHttpRequest.DONE) {
            fun(s.responseText)
            if (s.status !== 200) {  
                // 錯誤處理
                //msgShow(lg[lg_code]+' : 500');
                return;
            }
        }
    };
    s.open(o.type,o.url,true);
    s.send(o.data);
}