Ajax异步请求——表单的校验

- 下面是校验用户名，密码和昵称的Js代码
- 下面是校验用户名，密码和昵称的HTML代码

Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

下面是校验用户名，密码和昵称的Js代码

通过Ajax的异步提交，在不需要全部提交表单的情况下来实现访问服务器

JavaScript代码片

<script type="text/javascript">
 	var flag4=false;
 	var flag1=false;
 	var flag2=false;
 	var flag3=false;
		function check() {
			var username=$("#username")[0];
			$.ajax({
				url: "http://localhost:8080/projectshop-zhangjinhao/back/admin?a=ajax_u&username="+username.value,	
				dataType: "html",
				type:"get",
				context: $("#uTips"),
				success: function(data){
					var color ="green";
					if(data !="ok" && username.value=="" || $.trim(username.value).length == 0){
						color = "red";
						$("#username")[0].focus();
					}else{
						flag1=true;
					}
						$(this).text(data).css("color",color);
		     			 },	 
				});
	 
		}
		function check2() {
			var name=$("#name")[0];
			$.ajax({
				url: "http://localhost:8080/projectshop-zhangjinhao/back/admin?a=ajax_n&name="+name.value,	
				dataType: "html",
				type:"get",
				context: $("#nTips"),
				success: function(data){
					var color ="green";
					if(data !="ok" && name.value=="" || $.trim(name.value).length == 0){
						color = "red";
						$("#name")[0].focus();
					}else{
						flag2=true;
					}
						$(this).text(data).css("color",color);
		     			 },	 
				})；	 
		}
		function check3(){
			password =$("#password");
			var msg="ok";
			var color="red";
			var check =/^\w{6,18}$/;
			if(check.test(password.val())){
				color="green";
				flag3=true;
			}else{
				msg="请输入6到18位密码";
			}
			$("#pTips").text(msg).css("color",color);
		}
		function check4(){
			var pa2=$("#password2");
			var msg="ok";
			var color="green";
			if(pa2.val()!=password.val()){
				color ="red";
				msg="两次密码不一致";
			}else{
				flag4=true;
			}
			$("#pTips2").text(msg).css("color",color);
		}

		function confirm(){
			if(flag1 && flag2 && flag3 && flag4){
				return true;
			}else{			
				return false;
				}
			}
	</script>

下面是校验用户名，密码和昵称的HTML代码

在校验不成功的情况下还要阻止表单的提交事件

<li>
     
        <span class="item_name" style="width:120px;">管理员账号：</span>
        <input type="text" class="textbox textbox_225" value='' name="username" placeholder="管理员账号..." id="username" "check();"/>
        <span id="uTips"></span>
       </li>
       <li>
        <span class="item_name" style="width:120px;">登陆密码：</span>
        <input type="password" class="textbox textbox_225" value="" name="password" placeholder="管理员密码..." id="password" "check3();"/>
        <span id="pTips"></span>
       </li>
       <li>
       <li>
        <span class="item_name" style="width:120px;">确认密码：</span>
        <input type="password" class="textbox textbox_225" value="" name="password" placeholder="管理员密码..." id="password2" "check4();"/>
        <span id="pTips2"></span>
       </li>
       <li>
     
        <span class="item_name" style="width:120px;">管理员名称：</span>
        <input type="text" class="textbox textbox_225" value='' name="name" id="name" placeholder="管理员昵称..."  "check2();"/>
        <span id="nTips"></span>
       </li>

阻止事件的方法

1.event.stopPropagation();

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

2.return false;

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

3.event.preventDefault();

如果把它放在头部A标签的click事件中，点击“点击我”。

会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

Ajax异步请求——表单的校验