![[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
ajax({
url:目标地址，
data：发送的数据，
type：发送的方式，
sueecss：目标地址返回的数据
})需要配置本地环境
文件路劲
font
ajax.html
dome.php
下边看代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
div{
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div>
<h2>用户查找</h2>
<label for="text">用户名:</label>
<input type="text" name="text" id="text">
<button>验证</button> <br>
<p></p>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('button').click (function(){
//补充代码与修改---加载提示
$(document).ajaxStart(function(){
console.log('加载中')
})
$(document).click (function(){
console.log('加载成功')
$.ajax({
url:'dome.php',
data:{"text":$('#text').val()},
type:'GET',
success:function(data){
$('p').empty()
$("p").append(data)
}
})
//禁用默认提交
return false
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
<?php
// print_r($_GET);exit;
// 用数组模拟数据库中的已存在的用户名,这是不允许使用的
$nameList = ['admin','peter','php'];
//这是当前用户提交的用户名
$userName = $_GET['text'];
//判断用户名是否为空
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>';
}点击 "运行实例" 按钮查看在线实例
