JQuery去实现校验用户名

JQuery

• 是什么?

javascript 的代码框架。

• 有什么用?

简化代码，提高效率。

• 核心

write less do more , 写得更少，做的更多。

load

//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
		//找到id的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	});

Get

$.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

赋值显示

• val(“aa”);

只能放那些标签带有value属性

• html(“aa”); —写html代码
• text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

load & get

• load

  $("#元素id").load(url地址);

  $("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值
  

• get

  语法格式 ： $.get(URL,callback);

	使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

• post

  语法格式：$.post(URL,data,callback);

	function post() {
		$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
			//想要放数据到div里面去。 --- 找到div
			$("#div01").html(data);
		});
	}

使用JQuery去实现校验用户名

修改上一篇用Ajax写的校验用户名的代码就好了，因为服务端的代码都是一样的

https://blog.csdn.net/weixin_44718300/article/details/89055246

<!-- 导入JQuery的支持 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

	function checkUserName() {
		//1. 获取输入框的内容
		var name = $("#name").val();

		//2. 发送请求
		$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert("用户名存在");
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				//alert("用户名可用");
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}

</script>