前端开发 | 在线支持

【示例】

test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post方式发送数据</title>
</head>
<body>
<h1>注册名字</h1>
<input type="text" name="userName" id="btnName">
<label id="tishi" style="display:none"></label>
</body>
</html>
<script>
//绑定失去焦点事件
document.querySelector('#btnName').onblur=function(){
  // 发送ajax请求到服务器
  //1.创建异步对象
  var ajax = new XMLHttpRequest();
  //2.设置请求的url等参数
  ajax.open('post','server.php');
  /*如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：*/
  ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  // 3.发送请求
  ajax.send('Name='+document.querySelector('#btnName').value);

  // 4.注册事件
  ajax.onreadystatechange = function(){
	if (ajax.readyState ==4&&ajax.status==200) {
		// 5.在注册事件中接收返回的内容并修改数据
		console.log(ajax.responseText);
		var show = document.querySelector('#tishi');
			show.style.display='block';
		if (ajax.responseText =="exist") {

			show.innerHTML='<h2>该用户已经注册了！</h2>'

		} else{
			show.innerHTML='<h2>你可以使用该名字！</h2>'
		}
	}
  };
}
</script>

server.php

<?php
header('content-type:text/html;charset=utf-8');
$name=$_POST['Name'];
// 准备一个数据 模拟已经存在的用户
$nameArray = array('jack','kong','rose','ice');
// 检验是否存在，并且接受返回值
$result=in_array($name, $nameArray);
// 通过if else返回不同的值给浏览器
if($result){
	echo "exist";
} else{
	echo "not exist";
}
?>

下载源代码