AJAX学习笔记----jquery+servlet实现用户名验证

最新推荐文章于 2021-02-19 19:20:01 发布

persistC

最新推荐文章于 2021-02-19 19:20:01 发布

阅读量135

点赞数

分类专栏： AJAX 文章标签： Servlet Ajax jQuery JavaEE JavaScript ViewUI

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文件一 ajax1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户名校验</title>

文件二 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">
          <servlet>
              <servlet-name>AjaxServer</servlet-name>
              <servlet-class>AjaxServer</servlet-class>
          </servlet>

    <servlet-mapping>
              <servlet-name>AjaxServer</servlet-name>
              <url-pattern>/AjaxServer</url-pattern>
    </servlet-mapping>
</web-app>

文件三 AjaxServer.java

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
* Created by IntelliJ IDEA.
* User: czx
* Date: 2008-11-7
* Time: 11:18:29
* To change this template use File | Settings | File Templates.
*/
public class AjaxServer extends HttpServlet {
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
       doPost(httpServletRequest, httpServletResponse);    //To change body of overridden methods use File | Settings | File Templates.
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.取参数信息 2.检查参数是否有问题 3.数据校验
        // 4.和传统开发不同，把用户感兴趣的数据返回给页面而不是转向一个新页面给用户
         response.setContentType("text/html;charset=GB2312");
         PrintWriter out = response.getWriter();
         String name = request.getParameter("name");
         if(name == null || name.length() == 0){
             out.print("用户名不能为空");
         }else{
             String newName = new String(name.getBytes("ISO8859-1"));
             if(newName.equals("czx")){
                 out.println("用户名"+newName+"已存在");
             }else{
                 out.println("新用户"+newName+"，可以使用");
             }
         }
         out.println("<br><a href=\"index.html\">返回验证页面</a>");
    }
}

文件四 veryfy1.js

function veryfy(){
    //alert('按钮被点击了');
    //dom方式获取页面数据
    //document.getElementById("name");
    //jquery查找节点的方式   参数中#加上id的属性值，可以找到一个节点
    //jquery的方法返回的都是jquery对象 , 可以继续在上面执行其他jquery的方法
    var jqueryobj = $("#name");
    var name = jqueryobj.val();

    //将文本框中的数据发送给服务器的servlet
    //使用jquery的XMLHttpRequest对象get请求的封装
    $.get("AjaxServer?name="+name,null,callback);

}
function callback(data){
    //alert('服务器的数据来了');
    //3.接受服务器返回的数据
    //alert(data);
    //4。将服务器返回的数据动态显示在页面上
    //找到保存结果信息的节点
    var resultobj = $("#result");
    //动态改变页面中div节点的内容
    resultobj.html(data);
    //alert('');
}

主意:需要导入jquery包，这里用的是1.2.6版本的

persistC

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习笔记----jquery+servlet实现用户名验证

文件一 ajax1.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;用户名校验&lt;/title&gt;
复制链接

扫一扫