526互联

侦听器-判断用户名是否被占用

发布时间 2023-06-11 00:05:32作者: Young_Yang_Yang
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="username" />
		</div>
		<script src="lib/vue-2.6.12.js"></script>
		<script src="lib/jquery-v3.6.0.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					username: ''
				},
				// 所有的侦听器，都应该被定义到watch节点下
				watch: {
					// 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
					username(newVal) {
						if (newVal === '')
							return
						//1.调用jQuery中的Ajax发起请求，判断newVal是否被占用！！！
						$.get('http://localhost:8080/api/finduer/' + newVal, function(result) {
							console.log(result)
						})
					}
				}
			})
		</script>
	</body>
</html>