在jsp中使用ajax技术示例：验证用户是否存在

最新推荐文章于 2018-02-19 22:10:31 发布

南北雪树

最新推荐文章于 2018-02-19 22:10:31 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： Ajax

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

首先说明一下几个名词的意思，我自己理解的
jquery 网上说是JavaScript库或框架。
ajax 一种可以进行异步通信的技术。
本实例用到了jquery库
具体实现步骤如下：
1.下载jquery库我下载的是jquery-1.3.2.js,我试过了支持jsp，好像jquery.js不支持jsp，我也没测试成功，哪位大哥在jquery.js下面测试成功了，告我啊
2.把它放在一个web工程webroot目录下面的一个文件夹里面（如 js文件夹里面）
3.编写服务器端的程序：
AjaxServlet.java

public class AjaxServlet extends HttpServlet {   
       
    protected void doGet(HttpServletRequest request, HttpServletResponse response)   
            throws ServletException, IOException {   
        response.setContentType("text/html;charset=utf-8");   
        PrintWriter out = response.getWriter();   
        String username  = request.getParameter("name");   
        System.out.println(username);   
        if(username==null){   
            out.println("请输入用户名");   
        }   
        else if(username.equals("admin")){   
         ut.println("用户名已经被注册了");   
        }   
        else{   
        out.println("用户名"+username+"可以进行注册");   
        }   
                       
    }   
    protected void doPost(HttpServletRequest request,HttpServletResponse response)   
    throws ServletException, IOException {   
           
        doGet(request,response);   
    }   
       
    public void destroy() {   
           
        super.destroy();   
    }   
       
    public void init() throws ServletException {   
           
        super.init();   
    }      
       
}

配置web-xml文件
代码如下

<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.4"    
    xmlns="http://java.sun.com/xml/ns/j2ee"    
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee    
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
    <servlet>  
    <servlet-name>AjaxServlet</servlet-name>  
    <servlet-class>com.servlet.AjaxServlet</servlet-class>  
  </servlet>  
   <servlet-mapping>  
    <servlet-name>AjaxServlet</servlet-name>  
    <url-pattern>/AjaxServlet</url-pattern>  
  </servlet-mapping>  
  <welcome-file-list>  
    <welcome-file>index.html</welcome-file>  
  </welcome-file-list>  
</web-app>

写前台代码：
ajax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>ajax示例</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->  
    <script type="text/javascript" src="js/verify.js"></script>  
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>  
       
  </head>  
     
  <body>  
    用户名校验Ajax实例，请输入要注册的用户名和密码：<br/>  
    <!-- ajax方式不需要使用表单来进行提交数据，因此不用写表单标签 -->  
    <!-- ajax方式不需要name属性，需要一个id的属性 -->  
   username:<input type="text" id="username"/><br/>  
   password:<input type="password" id="password"/><br/>  
   <input type="button" value="检测用户是否存在" οnclick="verify()"/>  
   <!-- 这个div用于存放服务器返回的结果，开始为空 -->  
   <div id="result"></div>  
   </body>  
</html>

上面得html文件里面导入了js文件，一个是jquery-1.3.2.js，一个事verify.js文件，刚才在js文件下面存放了jquery-1.3.2.js文件，需要在js文件夹下面新建一个verify.js文件
verify.js文件代码如下：
//定义用户校验的方法

function verify(){   
    //alert("ajax实例");   
    //1.获取文本框中的内容   
    //document.getElementById("username");dom的方式   
    //jquery 查找节点方式,参数中#加在id属性值可以得到一个节点   
    //jquery 的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法   
    var jqueryObj1 = $("#username");   
    //获取节点的值   
    var username = jqueryObj1.val();   
    //2.将文本框中的数据发送给服务器的servlet   
    //使用jquery的xmlHttpRequest对象的get请求的封装 这几种方法都行   
    //$.get(url,date,回调函数)   
    $.get("AjaxServlet?name="+username,null,callback);   
    //$.get("AjaxServlet",username,callback);   
    //$.get("AjaxServlet","name="+username,callback);      
       
       
}   
//回调函数   
function callback(data){   
   //alert("服务器端的数据回来了!!");   
   //3.接受服务器端返回的数据     
    //4.将服务器端返回的数据动态的显示在网页上   
    //找到保存结果信息的节点   
    var resultObj = $("#result");   
    //动态的改变页面节点div中的内容   
    resultObj.html(data);   
}

到此所有的工作都做完了，测试下就知道了

南北雪树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在jsp中使用ajax技术示例：验证用户是否存在

首先说明一下几个名词的意思，我自己理解的 jquery 网上说是JavaScript库或框架。 ajax 一种可以进行异步通信的技术。本实例用到了jquery库具体实现步骤如下： 1.下载jquery库我下载的是jquery-1.3.2.js,我试过了支持jsp，好像jquery.js不支持jsp，我也没测试成功，哪位大哥在jquery.js下面测试成功了，告我啊
复制链接

扫一扫