![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
1、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()</title>
</head>
<body>
<h2>用户登录</h2>
<form>
<p>用户名：<input type="text" name="name"></p>
</form>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(':input').blur(function(){
// console.log('通过')
// 用法1：将回调写到$.ajax()函数中
$.ajax({
//
// 参数是对象，所以必须用{}包裹
// 1.url，请求的服务器资源
url:'api/demo.php',
// 2.客户端的请求类型：post,get,put……
type:'GET',
// 3.从服务器返回的数据格式:json,html,txt,xml
// dataType:'json',
// 4.异步（true)或同步(false，也叫服务器锁定）
async:true,
// 5.发送的数据
// 查询字符串方式
data:'name='+$(':input').val(),
// 6.成功回调函数,success:function(mag,status,xhr){}
success: function(msg,status, xhr){
// console.log(msg)
$('p span').empty()
$('p').append($(msg))
}
// 7.错误回调函数,error:function(){xhr,status,error}
})
})
</script>点击 "运行实例" 按钮查看在线实例
2、PHP代码
<?php
// print_r($_GET);exit;
$nameList = ['admin','peter','php'];
$userName = $_GET['name'];
if(strlen(trim($userName)) == 0){
echo '<span style="color:red">用户名不能为空</span>';
}else if (is_numeric($userName)) {
echo '<span style="color:red">用户名不能为纯数字</span>';
}else if(in_array($userName,$nameList)){
echo '<span style="color:red">用户名已存在</span>';
}else{
echo '<span style="color:green">用户名可用</span>';
}点击 "运行实例" 按钮查看在线实例
3、手写代码
