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事件中,点击“点击我”。
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)