博客列表 >20180410作业($.ajax()异步验证)

20180410作业($.ajax()异步验证)

lilove的博客
lilove的博客原创
2018年04月11日 21:09:17692浏览

主题:

使用$.ajax()对输入的账号信息进行异步验证。

效果图:

20180410作业效果.png

代码实例:

<!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数据格式需要服务器转换格式才能返回。

作业手写:

0410作业手写.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议