jQuery对AJAX的封装——$.get(验证用户名是否存在)_$.get方法验证用户是否已经存在-优快云博客

本文链接：https://blog.youkuaiyun.com/java_zhaoyanli/article/details/51126786

php:

<span style="font-size:18px;"><?php
//判断客户端传递过来的用户名在数据库中是否已经存在，返回'exists'或'non-exists'
header('Content-Type: text/plain');
$db = ['tom', 'mary', 'king'];

$uname = $_REQUEST['uname'];

if( in_array($uname, $db) ){
	echo 'exists';
}else {
	echo 'non-exists';
}

?></span>

html:

<span style="font-size:18px;"><!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
 </head>

 <body>
	<h1>jQuery对AJAX的封装——$.get</h1>
	<h3>异步验证用户名是否存在</h3>

	用户名：<input id="uname"><span id="unameMsg"></span><br>
	密码名：<input id="upwd"><br>
	<input type="button" value="提交注册信息">

	<script src="js/jquery-1.11.3.js"></script>
	<script>
		$('#uname').blur(function(){
			var uname = $(this).val();
			if(!uname){
				return;
			}
			//发起异步请求
			/*$.get('3-checkuname.php?uname='+uname,
			function(data, msg, xhr){
				console.log('成功得到服务器返回的响应消息');
				//console.log(arguments);
				if(data==='exists'){
					$('#unameMsg').html('该用户名已被占用！').css('color', 'red');
				}else {
					$('#unameMsg').html('该用户名可以使用！').css('color', 'green');
				}
			})*/
			/*$.get('3-checkuname.php','uname='+uname,function(data, msg, xhr){
				console.log('成功得到服务器返回的响应消息');
				//console.log(arguments);
				if(data==='exists'){
					$('#unameMsg').html('该用户名已被占用！').css('color', 'red');
				}else {
					$('#unameMsg').html('该用户名可以使用！').css('color', 'green');
				}
			})*/
			var obj = {'uname':uname, age:20};
			$.get('3-checkuname.php',obj,function(data, msg, xhr){
				console.log('成功得到服务器返回的响应消息');
				//console.log(arguments);
				if(data==='exists'){
					$('#unameMsg').html('该用户名已被占用！').css('color', 'red');
				}else {
					$('#unameMsg').html('该用户名可以使用！').css('color', 'green');
				}
			})

		})
	</script>
 </body>
</html>
</span>