博主信息
博文 87
粉丝 0
评论 0
访问量 72862
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
第十八节课作业:$.ajax()无刷新验证
黄忠倚的博客
原创
868人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7.$.ajax()</title>
</head>实例
<?php

// print_r($_GET['name']);exit;
// 用数组来模拟数据库中已经存在的用户名,这些用户名是禁止使用的
$nameList = ['admin','huodi','huodi100'];

//当前用户提交的用户名
$userName = $_GET['name'];

//判断用户名是否为空
if(strlen(trim($userName)) == 0) {
	$status = 0;
	$tips = '<span style="color:red">用户名不能为空</span>';
	echo json_encode(['status'=>$status,'tips'=>$tips]);
}
//判断是否为纯数字
else if (is_numeric($userName)) {
	$status = 0;
	$tips = '<span style="color:red">用户名不能纯数字</span>';
	echo json_encode(['status'=>$status,'tips'=>$tips]);
}
//判断是否已存在
 else if (in_array($userName,$nameList)) {
	$status = 0;
	$tips = '<span style="color:red">用户名已存在</span>';
	echo json_encode(['status'=>$status,'tips'=>$tips]);
} 
//用户名可用的提示
else {
	$status = 1;
	$tips = '<span style="color:green">恭喜,用户名可用</span>';
	echo json_encode(['status'=>$status,'tips'=>$tips]);
}

运行实例 »
点击 "运行实例" 按钮查看在线实例
<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">
		/**
		 * $.ajax()
		 * 功能:是jquery中的ajax的底层方法,$.post(),$.get()是它的快捷函数
		 * 语法:$.ajax(type,url,dataType,success,error)
		 * 参数:参数通常写到js对象字面量中                                          
		 */
		$(':input').blur(function(){
			//语法1:将回调函数写到$.ajax()函数中
			//
			//序列化:name=admin&password=123456$age=30&sex=0&hoppy......
			//
			$.ajax({
				//1.请求的服务器资源
				url:'./api/demo.php',

				//2.客户端的请求类型:get,post,put...
				type:'GET',
				
				//3.从服务器返回的数据格式:json,html,xml,text
				// dataType:'json',
				
				//4.异步或同步,true异步,false同步(浏览器锁定)
				async:true,
				
				//5.发送的数据:string,json,序列化
				//查询字符串
				// data:'name='+$(':input').val(),
				// data:{'name':$(':input').val()},
				// data:$('form:first').serialize(),  //结果是查询字符串
				   data:$('form:first').serializeArray(),  //以json方式发送的
				//6.成功回调函数:success:function(msg){}
				success:function(msg,status,xhr){
					console.log(msg)
				$('p span').empty()
				$('p').append($(msg))
				//$('span').append($(msg))
					}
				//7.错误回调函数:error:function(xhr,status,error){}
				})

				/**
				// $.ajax()第二种语法格式,用的不多,但要看得懂!
					$.ajax({
						url:'api/demo1.p实例
<?php
// print_r($_GET['name']);exit;
// //用数组来模拟数据库中已经存在的用户名,这些用户名是禁止使用的
$nameList = ['admin','huodi','huodi100'];

// //当前用户提交的用户名
$userName = $_GET['name'];

//判断用户名是否为空
if (strlen(trim($userName)) == 0) {
	echo '<span style="color:red">用户名不能为空</span>';
}
//判断用户名是否为纯数字
elseif (is_numeric($userName)) {
	echo '<span style="color:red">用户名不能为纯数字</span>';
}
//判断用户名是否重复
elseif (in_array($userName, $nameList)) {
	echo '<span style="color:red">用户名已存在</span>';
}
//用户可用提示
else {
	echo '<span style="color:green">恭喜,用户名可用</span>';
}

运行实例 »
点击 "运行实例" 按钮查看在线实例hp',
						type:'GET',
						dataType:'json',
						data:$('form:first').serialize()
					}).done(function(msg){  //成功的回调
						console.log(msg.tips)
						$('p span').empty()
						$('p').append($(msg.tips))		
					})*/
				})	
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学