アヤックスポスト主オブジェクトハンドルのリクエストをAJAX -xhr

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);



?>

公開された252元の記事 ウォンの賞賛3 ビュー3272

おすすめ

転載: blog.csdn.net/weixin_43294560/article/details/103654623