收藏
批改状态：合格
老师批语：
主题：
使用$.ajax()对输入的账号信息进行异步验证。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()异步验证</title>
</head>
<body>
<h2>登录验证</h2>
<form>
<p>
<label for="">用户名：</label>
<input type="" name="" id="">
</p>
</form>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// // 添加离开焦点事件blur()
$(':input').blur(function(){
// // 使用$.ajax()异步验证
$.ajax({
// 1.请求的资源名称
url: 'api/demo.php',
// 2.请求类型
type: 'GET',
// 3.请求数据格式(json数据格式需要服务器端编码才能正常返回数据)
// dataType: 'json',
// 4.异步(true)或者同步(false)
async: true,
// 5.发送的数据内容
data: 'name='+$(':input').val(),
// 6.回调结果(是否成功)
success: function(msg,status,xhr){
console.log(msg)
$('p span').empty()
$('p').append($(msg))
}
})
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
tip:json数据格式需要服务器转换格式才能返回。
作业手写：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
