首页 > 其他分享 >day51(监听器,ajax)

day51(监听器,ajax)

时间:2022-11-20 19:34:32浏览次数:49  
标签:function name s1 xhr ajax 监听器 var day51

web

监听器

  • 第一种监听
    (1). 实现HttpSessionBindingListener接口
    image
    (2). 重写相关方法
    注意: 在哪个类中实现了该接口,就会监听哪个类
    当这个类对象被设置session中时,会自动调用valueBound()方法,当这个类对象从session中移除时,会自动调用valueUnBound()方法
    image

  • 第二种监听
    (1)创一个类去实现HttpSessionListener接口(不一定是User类了,专门的监听类)
    (2)重写相关方法
    image
    (3)web.xml中配置监听器
    image

ajax实现用户验证

//将name提交到后台进行校验(js版的ajax)
//(1)创建XMLHttpRequest对象
var xhr=createXmlHttpRequest();
//(2)创建回调函数(数据成功提交到后台,并且正确返回的话,会自动调用的一个方法:该方法中可以携带后台返回的相关数据)
xhr.onreadystatechange=callback;//callback名字可以自定义(回调函数的名字)
//(3)初始化XMLHttpRequest组件
//var url="userServlet?name="+name;//发送到后台的servlet地址
//xhr.open("GET",url,"true");//第三个参数指的是是否开启异步请求
//(4)发送请求
//xhr.send(null);
//使用post方式提交
var url="userServlet";
xhr.open("POST",url,"true");
xhr.setRequestHeader( "Content-Type","application/x-www-form-urlencoded" );
var d="name="+name;
xhr.send(d);
//(5)在回调函数中处理返回的结果
function callback(){
	//如果这两个状态都满足以下情况,则表示正确发送请求并正确读取到后台返回的响应数据
	if(xhr.readyState==4 && xhr.status==200){
		//获取响应回来的数据
		var data=xhr.responseText;
		//如果date返回的是false,说明验证正确,返回true,则验证不正确
		if(data=="false"){
			s1.innerHTML="用户可用!";
		}else{
			s1.innerHTML="该用户名已存在!";
		}
	}/* else{
		alert("系统正忙!请稍后再试!")
	} */
	}

使用jquery的ajax实现用户验证

  1. 导入jquery的包
    image

  2. 在script标签中写jquery代码

     //页面加载事件
     $(function(){
     $("#u").blur(function(){//失去焦点事件
     	//获取用户名
     	var name=$(this).val();
     	if(name==""){
     		$("#s1").html("用户名不能为空!");
     	}else{
     		//alert(name);
     		$.ajax({
     			"url"	:	"userServlet",	//提交请求的路径
     			"data"	:	"name="+name,	//请求携带的数据
     			"dataType"	:	"text",		//预计后台返回的数据类型
     			"type"	:	"GET",			//提交请求的方式
     			"success"	:	callback,	//成功之后的回调函数
     			"error"	:function (){
     				alert("系统繁忙,请稍后再试")
     			}
     		});
     		function callback(data){
     			if(data=="false"){
     				$("#s1").html("用户可用!");
     			}else{
     				$("#s1").html("用户名已存在!");
     			}
     		}
     	}
     });
     });

标签:function,name,s1,xhr,ajax,监听器,var,day51
From: https://www.cnblogs.com/ayuuuuu/p/16909101.html

相关文章

  • MVC三层架构、Filter、监听器
    MVC三层架构什么是MVC:ModelViewController模型、视图、控制器早些年用户直接访问控制层,控制层就可以直接操作数据库servlet--CRUD--数据库弊端:程序十分臃肿,不......
  • ajax知识
    资源https://blog.csdn.net/Cc200171/article/details/125181937https://blog.csdn.net/qiuyushuofeng/article/details/125144793 1.AJAX定义AJAX:asyncjavascript......
  • AJAX
    1、概念AJAX:异步的JavaScript和XML2、AJAX作用:(1)与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据。    使用了AJAX和服务器进行通信,就......
  • dojo ajax 方法参数讲解 dojo.xhrPost
    fieldtypedescriptioncontent:ObjectContainspropertieswithstringvalues.Thesepropertieswillbeserializedasname1=value2andpas......
  • jQuery ajax上传文件
    <script>varformData=newFormData();constdate=$("#datepicker2").val();formData.append("date",date);formData.append("file",$("#upload")[0].f......
  • 25.JQury Ajax
    使用方法用菜鸟在线编辑器,不能允许跨站访问,不能从百度跳到谷歌getpostAJAXget......
  • ajax个人信息案例
    案例分析:如图所示,页面加载时有数据回填,同时实现select表单同步和图片上传,保存后上传至服务器等功能HTML模板:<!DOCTYPEhtml><htmllang="en"><head><metachars......
  • Vue 中 watch 监听器与 computed 计算属性的使用
    一、watch:监视单个属性,可做简单监视和深度监视。根据数据的具体结构,决定是否采用深度监视。配置deep:true可以监测对象内部值的改变,做深度监视时使用。1、简单监视:监视单......
  • day33 过滤器filter & 监听器listener & 利用反射创建BaseServlet实现调用自定义业务
    Filter过滤器Fileter可以实现:1)客户端的请求访问servlet之前拦截这些请求,对用户请求进行预处理2)对HttpServletResponse进行后处理;注意多个Filter的执行顺序在web.xml配......
  • 19.Ajax
    概述在搜索框输入返回的结果就是ajax......