Ajax概述和判断用户名是否存在的简单代码练习

Posted zxrxzw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax概述和判断用户名是否存在的简单代码练习相关的知识,希望对你有一定的参考价值。

在本代码中主要体现,Ajax实现了部分位置的刷新。不需要重新刷新网页,重新请求服务器。下面用过代码来对Ajax更深的认识

这里需要创建,一个jsp文件(显示登录界面),js文件(对Ajax的主要设置),一个servlet(主要用作和数据库连接和逻辑的控制)

1.在web中创建一个Lession7jsp页面,jsp中主要写了登录页面的用户名和密码和按钮

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>AJAX学习-用户登录</title>
    <script type="text/javascript" src="js/Lession7.js"></script>//对后面js页面进行调用。
</head>
<body>
<table align="center" border="1px" cellspacing="0px" cellpadding="10px"width="500">
    <tr>
        <td align="right" width="30%">用户名:</td>
        <td align="left" width="70%">
            <input type="text" name="name" id="user"/><span id="span"></span>
        </td>
    </tr>
    <tr>
        <td align="right"width="30%">密码:</td>
        <td align="left" width="70%">
            <input type="password" name="pwd" id="pwd"/></span>
        </td>
    </tr>
    <tr>
        <td align="center" colspan="2">
            <input type="button" value="注册">
        </td>
    </tr>
</table>
</body>
</html>

2.在web中新建一个叫js的文件夹,在js文件夹里面新建Lession.js文件。Ajax的设置都是JS中设置的,所以这个js文件就是Ajax学习的精髓和重点了。

/window.onload的意思是,页面加载就会显示这个方法
window.onload = function() {
//获取jsp页面中的用户名<input name="user">标签的name
var nameObj = document.getElementById("user")
//nameObj.onblur:进行绑定,当失去焦点时,就会调用下面的函数
nameObj.onblur = function () {
//获得标签的name属性的值,以此来获取浏览器输入的内容
var name = this.value;
/*alert(name);*/
//第一步:初始化XMLHttpRequest,创建异步对象,因为其他浏览器和老版本的IE浏览器创建对象的过程不一样,所有这里需要判断
//(第一步对AJAX初始化,在网上搜索有好多,不用可以把这一步的代码背下来,理解即可)
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步:指定回调函数,并对服务器的交互状态进行判断
//onreadystatechange是AJAX对象的一个属性,因为Ajax是异步处理的,所以需要一个这样的回调
xmlhttp.onreadystatechange=function(){
//readyState对服务器的状态,status是HTTP的状态
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//这里用到了JSON知识点,主要实现了把serlvt页面的数据传给js
//所以,这里的数据是servlt里传过来的。
var obj = eval("("+xmlhttp.responseText+")");// eval()获取返回值
if (obj.flag==0){
document.getElementById("span").innerText="用户名可用";
}else if (obj.flag==1) {
document.getElementById("span").innerText="用户名已经存在!";
}
}
}
//第三步:用open("1","2","3")连接服务器 ,
// 1里面放post或者get,2里面放的是servlet在web.xml中定义的。3:true代表异步处理
xmlhttp.open("post","/ServletXml?name="+name,true);
//第四步:向服务器发送请求,
xmlhttp.send(null);
}
}

3.在src中新建servlet,我这个项目连接了mysql数据库,如果没有数据库,可以直接把里面的数据写死了。这两个可以选择一个测试。

例如:1.

@Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String uname = request.getParameter("uname");
        //利用JDBC检索uname是否在用户表中存在
        PrintWriter out = response.getWriter();
        //向客户端输出响应结果
        out.print("{‘flag‘:1}");
    }

例如2.我的是动态连接数据库的。

package com.wgh;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;

@WebServlet(name = "ServletXml")
public class ServletXml extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            String name = request.getParameter("name");
            System.out.println(name);
            PrintWriter pw = response.getWriter();
            String[] str = new String[10];
            //进行数据库链接,查询数据库中用户名是否存在的操作
        try {
            Class.forName("com.mysql.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/z_shop";
            String username = "root";
            String pwd = "root";
            Connection conn = DriverManager.getConnection(url,username,pwd);
            String sql = "select count(*) FROM  td_name where Username=? ";
            PreparedStatement ps =conn.prepareStatement(sql);
            ps.setString(1,name);
            ResultSet rs = ps.executeQuery();
            rs.next();
            System.out.println(rs.getInt(1));
            if (rs.getInt(1)==0) {
                pw.print("{‘flag‘:0}");
            } else{
                pw.print("{‘flag‘:1}");
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        System.out.println(name);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
    }
}

最后记得在web.xml文件中进行注册哦!

 <servlet>
        <servlet-name>ServletXml</servlet-name>
        <servlet-class>com.wgh.ServletXml</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>ServletXml</servlet-name>
        <url-pattern>/ServletXml</url-pattern>
    </servlet-mapping>

注意:

1.本项目中用的JSON知识点,是需要导JSON的jar包的哦,

2.在src中Servle一定要放在包中,默认包可能不识别。

如果有错的地方请多多包含。代码我运行过,可以起来的。

技术图片

 

 

  

以上是关于Ajax概述和判断用户名是否存在的简单代码练习的主要内容,如果未能解决你的问题,请参考以下文章

在java Web中如何用Ajax实现用户名已存在

ajax 基础

django作业练习

javaweb历史上最简单的使用Ajax判断用户名是否被注册(不跳转页面奥!)

Python(入门小练习2)

Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码