POST.html页面代码快
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
登陆(login)
</title>
<style type="text/css">
.modal{
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgba(0,0,0,.5);
z-index: 999;
display: none;
}
.modal div{
background: #fff;
width: 260px;
height: 100px;
border-radius: 5px;
margin: 200px auto;
}
.denglu{
margin-top: 10px;
}
button{
margin: 5px auto;
margin-left: 115px;
}
</style>
</head>
<body>
<p>请登录!</p>
<div class="modal">
<div id="nei">
 用户名:<input class="denglu" type="text" name="us"><br>
 密码: <input class="denglu" type="text" name='ps'><br>
<button>登录</button>
</div>
</div>
<script type="text/javascript">
//点击p显示登录窗口
var p=document.getElementsByTagName('p')[0];
p.onclick=function () {
document.getElementsByClassName('modal')[0].style.display="block";
}
//显示登录窗口时,点击窗口返回
var modal=document.getElementsByClassName('modal')[0];
modal.onclick=function () {
document.getElementsByClassName('modal')[0].style.display="none"
}
var nei=document.getElementById('nei');
nei.onclick=function (event) {
var event = event || window.event;
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 标准
}
else
{
event.cancelBubble = true; // ie 678 ie浏览器
}
document.getElementsByClassName('modal')[0].style.display="block"
}
//登陆按钮
var login=document.getElementsByTagName('button')[0];
login.onclick=function(){
var us=document.getElementsByName('us')[0].value;
var ps=document.getElementsByName('ps')[0].value;
// console.log(us)
//发起ajax 请求
//实例化请求对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for Fire
// xmlhttp.onreadystatechange=state_Change;
// xmlhttp.open("GET",url,true);//方法 地址 数据 同步异步
// xmlhttp.send(null);fox, Mozilla, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4)
{
if (xmlhttp.status==200)
{
// console.log(xmlhttp.response)
// console.log(typeof(xmlhttp.response))
var resutlt=JSON.parse(xmlhttp.response);
console.log(resutlt)
if (resutlt.err==0) {
alert(resutlt.msg);
document.getElementsByClassName('modal')[0].style.display="none"
p.innerHTML="欢迎"+"登陆"+resutlt['us']
}
else{
alert(resutlt.msg);
}
}
}
};
var url="http://localhost/8.2/Plogin.php";
xmlhttp.open("POST",url,true);//方法 地址 数据 同步异步
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")
xmlhttp.send("us="+us+"&ps="+ps);
}
</script>
</body>
</html>
<!-- get方法下如何传递json字符串(地址栏传递参数)
post(send传递参数,设置头文件信息xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"))
验证用户名是否存在
npc -->
<!-- open函数需要自己改“方法 地址 数据” -->
Plogin.php页面代码快
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
登陆(login)
</title>
<style type="text/css">
.modal{
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: rgba(0,0,0,.5);
z-index: 999;
display: none;
}
.modal div{
background: #fff;
width: 260px;
height: 100px;
border-radius: 5px;
margin: 200px auto;
}
.denglu{
margin-top: 10px;
}
button{
margin: 5px auto;
margin-left: 115px;
}
</style>
</head>
<body>
<p>请登录!</p>
<div class="modal">
<div id="nei">
 用户名:<input class="denglu" type="text" name="us"><br>
 密码: <input class="denglu" type="text" name='ps'><br>
<button>登录</button>
</div>
</div>
<script type="text/javascript">
//点击p显示登录窗口
var p=document.getElementsByTagName('p')[0];
p.onclick=function () {
document.getElementsByClassName('modal')[0].style.display="block";
}
//显示登录窗口时,点击窗口返回
var modal=document.getElementsByClassName('modal')[0];
modal.onclick=function () {
document.getElementsByClassName('modal')[0].style.display="none"
}
var nei=document.getElementById('nei');
nei.onclick=function (event) {
var event = event || window.event;
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c 标准
}
else
{
event.cancelBubble = true; // ie 678 ie浏览器
}
document.getElementsByClassName('modal')[0].style.display="block"
}
//登陆按钮
var login=document.getElementsByTagName('button')[0];
login.onclick=function(){
var us=document.getElementsByName('us')[0].value;
var ps=document.getElementsByName('ps')[0].value;
// console.log(us)
//发起ajax 请求
//实例化请求对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for Fire
// xmlhttp.onreadystatechange=state_Change;
// xmlhttp.open("GET",url,true);//方法 地址 数据 同步异步
// xmlhttp.send(null);fox, Mozilla, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4)
{
if (xmlhttp.status==200)
{
// console.log(xmlhttp.response)
// console.log(typeof(xmlhttp.response))
var resutlt=JSON.parse(xmlhttp.response);
console.log(resutlt)
if (resutlt.err==0) {
alert(resutlt.msg);
document.getElementsByClassName('modal')[0].style.display="none"
p.innerHTML="欢迎"+"登陆"+resutlt['us']
}
else{
alert(resutlt.msg);
}
}
}
};
var url="http://localhost/8.2/Plogin.php";
xmlhttp.open("POST",url,true);//方法 地址 数据 同步异步
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")
xmlhttp.send("us="+us+"&ps="+ps);
}
</script>
</body>
</html>
<!-- get方法下如何传递json字符串(地址栏传递参数)
post(send传递参数,设置头文件信息xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;"))
验证用户名是否存在
npc -->
<!-- open函数需要自己改“方法 地址 数据” -->