原生js ajax post请求

80 阅读 0 评论 53 点赞

我是靠谱客的博主复杂月亮，最近开发中收集的这篇文章主要介绍原生js ajax post请求，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

POST 请求
ajax在表单中常用，一般都是使用post方法，ajax请求：前台提交数据→后台查询数据→返回给前台
用法

//1、创建请求对象 XHR              
var xhr = null;           
if(window.XMLHttpRequest){                               
  	xhr = new XMLHttpRequest();   //其他浏览器                    
}else if(window.ActiveXObject){                                
   xhr = new ActiveXObject('Microsoft.XMLHTTP');  //老版本的IE 5 6                      
}else{                                
   alert('该浏览器不支持Ajax网络请求！');                       
}            
//2.绑定监听事件            
xhr.onreadystatechange  = function (){                
   if(xhr.readyState == 4 && xhr.status == 200){                    
   	doresponse(xhr);//返回的数据                
   }            
}           
// 3、POST请求中的默认Content-Type text/plain   
// PHP服务器会拒绝接受请求数据，必须在请求消息发送之前进行修改！            
xhr.open('POST',`login.php`,true); //请求的方式、地址、异步           
// 3.5、post请求设置请求头            
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');            
// 4、发送请求消息           
xhr.send(`uname=${username}&upwd=${upwd}`);

小案例
使用ajax请求登陆页面–> 欢迎语句
比如：张三 123456 - 登陆成功后页面右上角显示 ‘欢迎张三’。
在服务端拦截并响应：这里用的PHP

<?php
// 设置响应消息头
header('Content-Type:text/plain;charset=UTF-8');
// 模拟数据库中存在的用户
$db = [    ['uname'=>'addmin','pwd'=>'123456'], 
   ['uname'=>'amy','pwd'=>'123456'],    
   ['uname'=>'dyx','pwd'=>'123456']];
//必填项
@$uname = $_REQUEST['uname'] or die('缺少数据');
@$upwd = $_REQUEST['upwd'] or die('缺少数据');
// 是否存在
$bl = false;
foreach($db as $value){    
	// 判断是否匹配    
	if($uname == $value['uname'] && $upwd == $value['pwd']){        
		$bl = true;        
		break;    
	}
}
// 给客户端返回相关数据
echo $bl?'1':'0';?>

javascript:

// 点击登陆按钮       
document.querySelector('.btn').onclick = function(){            
	// 获取用户输入            
	var username = document.querySelector('[name="username"]').value;            
	var upwd = document.querySelector('[name="upwd"]').value;      
	if(username == '' || upwd == ''){                
		// 用户没有输入任何信息，没有验证的必要               
 		return;            
 	}            
 	//1、创建请求对象 XHR              
 	var xhr = null;            
 	if(window.XMLHttpRequest){                                
 		xhr = new XMLHttpRequest();   //其他浏览器                     
 	}else if(window.ActiveXObject){                                
 		xhr = new ActiveXObject('Microsoft.XMLHTTP');  //老版本的IE 5 6                      
 	}else{                                
 		alert('该浏览器不支持Ajax网络请求！');                       	}           
  	//2.绑定监听事件            
  	xhr.onreadystatechange  = function (){                
  	if(xhr.readyState == 4 && xhr.status == 200){   
          	doresponse(xhr);//返回的数据                
      	}            
      }            
      // 3、POST请求中的默认Content-Type text/plain   PHP服务器会拒绝接受请求数据，           
      // 必须在请求消息发送之前进行修改！            
     xhr.open('POST',`login.php`,true); //请求的方式、地址、异步            
     // 3.5、post请求设置请求头            
     xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');            
     // 4、发送请求消息            
     xhr.send(`uname=${username}&upwd=${upwd}`);        
}        
function doresponse(xhr){            
      // 获取用户输入                
      var username = document.querySelector('[name="username"]').value;               
      var upwd = document.querySelector('[name="upwd"]').value;               
 	if(xhr.responseText == '1'){  
              username.value = '';                   
              upwd.value = '';                   
              localStorage["user"] = username;                  
              location.href = "main.html";               
     	}else{                   
              alert('用户名或密码不正确！');               
        }        
}

下面结合css3动画写了了一个登陆页面
在这里插入图片描述

<div class="login_box">        
	<h2>会员登录</h2>        
	<!-- autocomplete="off" 不使用缓存 -->        
	<form autocomplete="off">            
		<div class="user_box">                
			<input type="text" name="username">                
			<label>用户名</label>            
		</div>            
		<div class="user_box">                
			<input type="password" name="upwd" >                
			<label>密码</label>            
		</div>            
		<a href="#" class="btn">                
			<span></span>                
			<span></span>                
			<span></span>                
			<span></span>                
			登录           
 		</a>       
  	</form>    
  </div>

css片段

/* 表单 */
.login_box .user_box {    
	position: relative;
}
.login_box .user_box input{    
	width: 100%;    
	padding: 10px 0;    
	font-size: 16px;    
	color: #fff;    
	margin-bottom: 30px;    
	border: none;   
	border-bottom: 1px solid #fff;    
	outline: none;    
	background: transparent;
}
.login_box .user_box label{    
	 position: absolute;    
	 top:0;    
	 left: 0;    
	 padding: 10px 0;    
	 font-size: 16px;    
	 color: #fff;    
	 pointer-events: none;    
	 transition: .5s;
 }
 /* 表示获得焦点  表示内容验证正确的<input> 或其他 <form> 元素 */
 .login_box .user_box input:focus ~ label,
 .login_box .user_box input:valid ~ label {  
	 top: -20px;  
	 left: 0;  
	 color: #5BBF76;  
	 font-size: 12px;
 }
 /* 登录按钮 */
 .login_box form a{    
	  position: relative;   
	  display: inline-block;    
	  padding: 10px 20px;    
	  color: #5BBF76;    
	  font-size: 16px;    
	  text-decoration: none;    
	  /* 转换不同元素中的文本：    uppercase 定义仅有大写字母。 */    
	  text-transform: uppercase;    
	  overflow: hidden;    
	  transition: .5s;    
	  margin-top: 40px;    
	  letter-spacing: 4px
}
.login_box a:hover{    
  background: #5BBF76;    
  color: #fff;    
  border-radius: 5px;    
  box-shadow: 0 0 5px #5BBF76,                
		0 0 25px #5BBF76,                
		0 0 50px #5BBF76,                
		0 0 100px #5BBF76;
  }
.login_box a span{    
	  position: absolute;    
	  display: block;
  }
.login_box a span:nth-child(1) {    
	  top: 0;    
	  left: -100%;    
	  width: 100%;    
	  height: 2px;    
	  background: linear-gradient(90deg, transparent, #5BBF76);    
	  animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1{0% {left: -100%;}50%,100% {left: 100%;}}
.login_box a span:nth-child(2) {    
  top: -100%;    
  right: 0;    
  width: 2px;    
  height: 100%;    
  background: linear-gradient(180deg, transparent, #5BBF76);    
  animation: btn-anim2 1s linear infinite;    
  animation-delay: .25s
}
@keyframes btn-anim2 {0% {top: -100%;} 50%,100%{top: 100%;}}  
.login_box a span:nth-child(3) {   
   bottom: 0;    
   right: -100%;   
   width: 100%;    
   height: 2px;    
   background: linear-gradient(270deg, transparent, #5BBF76);    
   animation: btn-anim3 1s linear infinite;
   animation-delay: .5s
}  
@keyframes btn-anim3 {0% {right: -100%;}50%,100% {right: 100%;}}  
.login_box a span:nth-child(4) {
	bottom: -100%;    
	left: 0;   
	width: 2px;    
 	height: 100%;    
	background: linear-gradient(360deg, transparent, #5BBF76);    
	animation: btn-anim4 1s linear infinite;    
	animation-delay: .75s
}  
 @keyframes btn-anim4 {0% {bottom: -100%;}50%,100% {bottom: 100%; }}