07-01-jQuery中的Ajax方法，三种请求检测用户名（重点）

注意点

提醒：智能猜测不可靠，必须要自己写上。

• $.get和$.post都是异步方式
• 方法名必须是小写。（js严格区分大小写）
• 这里的get（）和post（）是一个全局方法，可以理解为静态方法
• callback指定的回调函数只有在请求成功时才会执行，如果请求失败（例如找不到页面、服务器错误等）则不作任何处理。

$.get()

$.get（url, [data], [callback] ,type），GET方式异步请求

用户名登录

app.get("/check",(req,res) => {
	let username = req.query.username.trim();
	if (users.find( user => user == username)) {
		res.json({code : 1, msg : '对不起，该用户名已经被占用'});
	} else {
		res.json({code : 0, msg : '恭喜您，该用户名可以使用'});
	}
});

		<ul>
			<li>
				<label for="">用户名：</label>
				<input type="text" name="username" id="user">
				<span id="msg"></span>
			</li>
		</ul>	
	<script>
		// 注册blur事件
		$("#user").on("blur",function () {
			let username = $(this).val();
			// 使用JQ中的ajax
			$.get("/check",{username},res=>{
				$("#msg").html(res.msg)
			},"json")
		})
	</script>

$.post()

$.post（url, [data], [callback] ,type），POST方式异步请求

用户名登录

app.post("/check",(req,res) => {
	let username = req.body.username.trim();
	if (users.find( user => user == username)) {
		res.send("对不起，该用户已经被占用");
	} else {
		res.send("恭喜您，该用户可以使用");
	}
});

	<script>
		$("#user").blur(function () {
			let username = $(this).val();
			$.post("/check",{username},res=>{
				$("#msg").html(res)
			},"text")
		})
	</script>

$.ajax

具体的参数有如下：

• url，请求的目标URL，默认为当前页面
• async，是否是异步请求，默认为true，异步
• Type，请求类型，可以为POST或GET，默认为GET
• data，发送到服务器的数据，可以是字符串或对象类型
• dataType，指定返回数据类型xml/html/script/json/text/jsonp
• success，指定请求成功后执行的回调函数。
• error，请求失败时执行的回调函数 timeout，设置请求超时的毫秒值

用户名登录

	<script>
		$("#user").blur(function () {
			let username = $(this).val();
			// $.get和$.post是基于$.ajax进行的二次封装
			$.ajax({
				url:"/check",
				type:"get",
				data:{username},
				dataType:"json",
				success:function(res){
					$("#msg").html(res.msg);
				},
				error:function (err) {
					console.log(err)
				}
			});
		})
	</script>