Ajax实现异步更新

话不多说,直接上代码!

一:登录界面代码。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax</title> <link rel="stylesheet" href="login.css"> <script type="text/javascript"> window.onload = function(){ var btn01 = document.getElementById("btn"); btn01.onclick = function(){ var uname = document.getElementById("un").value; var upd = document.getElementById("up").value; //1.创建XMLHttpRequest对象 //var xhr = new XMLHttpRequest(); var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();//标准版本的浏览器 }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6 } //兼容浏览器处理 //2.准备发送 var param = 'userName='+uname+'&userPwd='+upd; //encodeURI()用来对中文参数进行编码,防止乱码 xhr.open('get','login.php?'+encodeURI(param),true); //3.执行发送 xhr.send(null); //4.指定回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var data = xhr.responseText; var info = document.getElementById('info'); if(data == '1'){ //info.innerHTML = '登录成功'; window.location.href = "login_suc.html"; }else if(data == '2'){ info.innerHTML = '用户名或密码错误'; } } } } } } </script></head><body> <form> 请输入账号:<input type="text" name="userName" id="un"> <br> 请输入密码:<input type="text" name="userPwd" id="up"> <span id='info'></span> <br> <input type="button" value="提交" id="btn"> </form> <div class="login_img"><img src="login.jpg" alt="背景图片" height="780px"></div> <!-- 背景图片自己加(login.jpg) --></body></html>
登录

二:登录界面css文件。

body{ margin:0; padding:0; } form{ position:fixed; margin:320px 700px; } input[type="button"]{ display: inline-block; position:absolute; margin-left:50px; margin-top: 10px; } input[type="button"]:hover{ background-color:red; }

三: 登录成功界面代码。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录</title> <style type="text/css"> h1{ position:fixed; margin:320px 700px; margin-top:300px; } h2{ position:fixed; margin:350px 555px; } </style></head><body> <h1 style="color:red">登录成功</h1> <h2>欢迎走进Ajax,带你从入坑到入神!</h2></body></html>

四:PHP动态处理代码。

<?php$uname = $_GET['userName'];$upwd = $_GET['userPwd'];if($uname == 'admin' && $upwd == '123456'){ echo "1";}else { echo "2";}?>

五:登录失败截图。

我用到的软件截图。附上下载链接(复制到浏览器打开)。

http://www.php.cn/xiazai/gongju/93

http://www.php.cn/xiazai/gongju/90

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注