Ajax ajax原生-xhr对象处理post请求

左手的ㄟ右手 2021-07-24 12:09 499阅读 0赞

post请求
    
    提交的表单数据 
    
    	创建表单数据
    		var 变量=new FormData();
    
    	给表单添加内容
    		变量.append(键,键所对应的值);

前台:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script src="jquery-3.4.1.js"></script>
    </head>
    <body>
    	<label for='username'>
    		<span >用户名</span><input type="text" class='username' id='username'>
    	</label>
    	<br/>
    	<label for="password">
    		<span >密码:</span><input type="text" class='password' id='password'>
    	</label>
    	<br/>
    	<button>post请求</button>
    	<script>
    		var usernameInput=document.querySelector(".username");
    		var passwordInput=document.querySelector(".password");
    
    		var btn=document.querySelector('button');
    		btn.onclick=function()
    		{ 
    			//创建xhr对象
    			var xhr=new XMLHttpRequest();
    			//监听请求是否成功
    			xhr.onreadystatechange=function()
    			{ 
    				//通过readyState属性的值，判断当前请求状态
    				if(xhr.readyState==4)
    				{ 
    					console.log("已接受");
    					//通过status属性来判断前台接收状态
    					if(xhr.status==200)
    					{ 
    					//此时表明真正接收到了数据
    						console.log(xhr.statusText);
    						var jsonData=JSON.parse(xhr.responseText);
    						console.log(jsonData);
    					
    					}
    				};
    
    
    			};				
    
    				//构建表单数据
    				var datas=new FormData();
    				datas.append('uname',usernameInput.value);
    				datas.append('upwd',passwordInput.value);
    
    				//发送post位置
    				xhr.open('post','3.php',true);
    				//开始发送
    				xhr.send(datas);
    
    
    		}
    
    	</script>
    
    </body>
    
    </html>

--------------------

后台:

<?php
    	$success=array('mes'=>'ok','info'=>$_POST);
    	echo json_encode($success);
    
    
    
    ?>