jsp+ajax发送GET请求的方法
本文实例讲述了ajax发送GET请求,然后通过jsp页面来接收处理的实现方法。分享给大家供大家参考。具体实现方法如下:
Ajax发送GET请求
这里用一个实例演示Ajax发送get请求,实例具体要求为一个注册页面,当用户填写完用户名称时,该输入框失去焦点后会通过Ajax向后台发送验证信息,如果用户名不是admin则通过验证,否则不通过验证。
下面先看JSP页面具体信息:
代码如下:
<form action="servlet/LoginServlet" method="post"> <table> <tr> <td>用户账号:</td> <td><input type="text" name="username" onblur="checkUser(this)"/></td> </tr> <tr> <td>用户密码:</td> <td><input type="password" name="password"/></td> </tr> <tr> <td><input type="submit" value="注册"/></td> <td><input type="reset" value="重置"></td> </tr> </table> </form>
这里后台处理信息用的是Servlet进行处理
首先看web.xml配置信息
代码如下:
<servlet> <servlet-name>LoginServlet</servlet-name> <servlet-class>login.LoginServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>LoginServlet</servlet-name> <url-pattern>/servlet/LoginServlet</url-pattern> </servlet-mapping>
然后看具体的servlet类的doGet方法
代码如下:
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charaet=UTF-8"); PrintWriter out = response.getWriter(); String name=request.getParameter("username"); System.out.println(name); if(name.equals("admin")) out.print(false); else out.print(true); out.flush(); out.close(); }
在Servlet类中做一个简单的验证。
在JSP的表单中,对输入用户名称的输入框设置了失去焦点的事件,也就是onblur事件。下面看javascript代码。
代码如下:
<script type="text/javascript"> //创建XMLHttpRequest function createXmlHttpRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject("Microsoft.XMLHTTP"); } } //当用户账号输入框失去焦点时调用该方法 function checkUser(obj){ //获取输入框输入的值 var user = obj.value; //如果输入框中的值为空,那么弹窗提示,并且让该输入框获得焦点 if(!user){ alert("用户名不能为空!"); obj.focus(); return; } //不为空时,使用Ajax请求向后台发送信息,验证该用户名是否可用 //get请求字符串 var url="servlet/LoginServlet?username="+user; //调用方法创建XMLHttpRequest对象 XmlHttpRequest = createXmlHttpRequest(); //设置回调函数 XmlHttpRequest.onreadystatechange=finish; //初始化xmlhttprequest XmlHttpRequest.open("GET",url,true); //发送请求 XmlHttpRequest.send(null); } //回调函数 function finish(){ if(XmlHttpRequest.readyState == 4&& XmlHttpRequest.status == 200){ var result = XmlHttpRequest.responseText; if(result =="true"){ alert("用户名可用!"); }else{ alert("用户名不可用!"); } } } </script>
希望本文所述对大家的jsp+Ajax程序设计有所帮助。
相关推荐
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05
坚持着执着 2020-07-05