1. 程式人生 > >XMLHttpRequest 與服務端的互動,以及layer子頁面關閉彈出框的總結

XMLHttpRequest 與服務端的互動,以及layer子頁面關閉彈出框的總結

$("#btn").click(function(){  //父頁面
        	layer.open({
        		type: 2,
        	    title: '註冊',
        	    area: ['500px', '300px'],
        	    content: '/login/register-show',
        	    
        	})
        })
$(document).ready(function(){ //子頁面
            $("#btn").click(function(){
            	var form = document.getElementById("form");
            	var data = new FormData(form);
            	var xml = new XMLHttpRequest();
            	var index = parent.layer.getFrameIndex(window.name); //獲取父頁面
            	xml.open('POST','/login/user-register')
            	xml.send(data)
            	xml.onreadystatechange=function(){
            		if(xml.readyState===4 && xml.status===200){
            			var text = xml.responseText //獲取服務端傳過來的值
            			parent.layer.close(index) //關閉layer
            			parent.layer.msg(text,{time:500,shade: 0.3});  //0.5秒後關閉父頁面的layer.msg
            		}
            	}
            })
        })
@PostMapping(value = "/user-register") //服務端
	@ResponseBody
	public String register(User user) {
		String status = null;
		BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
        String password = user.getPassword();
        password = encoder.encode(password);
        user.setPassword(password);
        user.setUserkey(UUID.randomUUID().toString().replaceAll("-", ""));
        int flag = mapper.insertUser(user);
        if(flag == 1) {
        	status = "註冊成功!!!";
        }else {
        	status = "註冊失敗!!!";
        }
        return status;
	}