鱼在海上飞 2018-06-29 01:50 采纳率: 100%
浏览 1222
已采纳

ajax(eclipse)具体简单实现

servlet,jdbc,xml,navicat,jsp实现一个ajax检测用户名的操作,求代码

  • 写回答

3条回答 默认 最新

  • govdoo 2018-06-29 02:20
    关注

    navicat 只是查询数据的工具,不用考虑

    login.jsp 也可以通过jquery 的 ajax 来实现

     <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>验证用户名是否存在</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function() {
    //通过id获取页面button的onclick点击事件
        document.getElementById("checkusername").onclick = function() {
            var username = document.getElementById("username").value;
            //测试打印出username(输入值)
            alert(username);
            //1.创建ajax对象
            var xhr = ajaxFunction();
            xhr.onreadystatechange = function() {
                //处理后台返回的数据
                if(xhr.readyState == 4) {
                    if(xhr.status == 200) {
                        var data= xhr.responseText;
                        document.getElementById("divcheck").innerHTML = data;
                    }
                }
            }
        //规定发送数据的形式(post/get),url,以及传输方式(同步/异步)
            xhr.open("post","./LoginServlet?timeStamp="+new Date().getTime(),true);
            //post方式需要加下边这句,get方式不需要
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //将页面输入数据发送到后台
            xhr.send("username="+username);
        }
    }
    
    function ajaxFunction() {
        var xmlHttp;
        try {
            xmlHttp = new XMLHttpRequest();
        } catch(e) {
            try {
                xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
            } catch(e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e) {}
            }
        }
        return xmlHttp;
    }
    </script>
    </head>
    <body>
    <form action="" enctype="application/x-www-form-urlencoded" >
    用户名:<input type="text" name="username" value="" id="username">
    <div id="divcheck"></div>
    <input type="button" name="checkusername" value="查看用户名" id="checkusername"/>
    </form>
    </body>
    </html>
    

    web.xml是配置文件,配置前台页面和后台Servlet的映射关系,注意url路径的对应。

     <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
    
      <welcome-file-list>
    
        <welcome-file>register.jsp</welcome-file>
      </welcome-file-list>
      <servlet>
         <servlet-name>LoginServlet</servlet-name>
         <servlet-class>com.test.Servlet.LoginServlet</servlet-class>
      </servlet>
    
       <servlet-mapping>
           <servlet-name>LoginServlet</servlet-name>
           <url-pattern>/LoginServlet</url-pattern>
      </servlet-mapping>
    </web-app>
    

    LoginServlet.java

     package com.test.Servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class LoginServlet extends HttpServlet {
    
        public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
            doPost(request,response);
        }
    
        public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{
            response.setContentType("text/html;charset=utf-8");
            //定义输出流
            PrintWriter out = response.getWriter();
            //获取前端页面输入数据
            String username = request.getParameter("username");
            //查询数据库,验证接收前台数据是否成功
    //导入驱动包
            Class.forName("com.mysql.jdbc.Driver"); 
            //链接至数据库
            String jdbc="jdbc:mysql://127.0.0.1:3306/mydb";
                    Connection conn=DriverManager.getConnection(jdbc, "root", "");
    
                    Statement state=conn.createStatement();//容器
                    String sql="select id,username from user";           //sql语句
                    ResultSet rs=state.executeQuery(sql);     //将sql语句传至数据库,返回的值为一个字符集用一个变量接收 
                    String tusername = null;
                    while(rs.next()){    //next()获取里面的内容
                    System.out.println(rs.getString(1)+" "+rs.getString(2);
                                                            //getString(n)获取第n列的内容
                                                                    //数据库中的列数是从1开始的
                                tusername = rs.getString(2);                    
                    }
    
                    conn.close(); 
            //进行比较并作出响应。
            if(username==null || username.equals("")) {
                out.println("请输入用户名 ");
            } else if(tusername.equals(username)) {
                out.println("该用户名已经存在");
            } else {
                out.println("可以注册");
            }
    
        }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 Excel发现不可读取的内容
  • ¥15 UE5#if WITH_EDITOR导致打包的功能不可用
  • ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题
  • ¥20 yolov5自定义Prune报错,如何解决?
  • ¥15 电磁场的matlab仿真
  • ¥15 mars2d在vue3中的引入问题
  • ¥50 h5唤醒支付宝并跳转至向小荷包转账界面
  • ¥15 算法题:数的划分,用记忆化DFS做WA求调
  • ¥15 chatglm-6b应用到django项目中,模型加载失败
  • ¥15 CreateBitmapFromWicBitmap内存释放问题。