Ajax异步验证-----jQuery

Ajax开发技术可以实现页面的局部更新，而不影响整体。
由于异步验证执行JavaScript操作过于繁琐了解即可。这里用jQuery实现Ajax的异步验证。
需求：当用户输入ID之后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用,则提示正确；如果有人使用，则提示错误信息。
数据库user表结构
在这里插入图片描述
一、直接上代码
1、编写注册表单页。----regist.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script language="JavaScript">
    var flag;
    function fun(userid) {
        //使用$.ajax（）发送异步请求
        $.ajax({
            url: "CheckServlet",   //请求路径
            type: "POST",  //请求方式
            data: {"userid": userid},
            success: function (data) {                      //data为接收servlet传来的数据
                if (data == "true") {
                    flag = false;
                    $("#msg").html("用户ID重复，无法使用");
                } else {
                    flag = true;
                    /*错误的写法 $("#msg").html = "此用户ID可以注册"*/
                   $("#msg").html("此用户ID可以注册");
                    /* /!*  alert("此用户ID可以注册");*!/测试用的*/
                }
                //alert(data);测试接收的数据
            }//响应成功后的回调函数
        });
    }
    function checkForm() {
        return flag;
    }
</script>
<from action="regist.jsp" method="post" onsubmit="return checkForm()">
    用户ID:<input type="text" name="userid" onblur="fun(this.value)"><span id="msg"></span><br>
    姓&nbsp;&nbsp;名:<input type="text" name="name"><br>
    密&nbsp;&nbsp;码:<input type="password" name="password"><br>
    <input type="submit" value="注册">
    <input type="reset" value="重置">
</from>
</body>
</html>

2、验证用户名是否存在----CheckServlet.java

package cn.anxincao.servlet;
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("/CheckServlet")
public class CheckServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("GBK");
        response.setContentType("text/html");
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;
        PrintWriter out = response.getWriter();
        String userid = request.getParameter("userid"); //接收验证的data中的userid注意是userid的名称
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection("JDBC:mysql:///mldn?serverTimezone=UTC", "。。。", "。。。");
            String sql = "select count(userid) from user where userid=?";
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, userid);
            rs = pstmt.executeQuery();
            if (rs.next()) {
                if (rs.getInt(1) > 0) {
                    out.print("true");
                } else {
                    out.print("false");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

二、测试

1.js改为jQuery后，没有得到显示的效果，页面也没有报错纠结了很久，通过alert测试最后确定是代码写错了。servlet的接收名称写错。
在这里插入图片描述 2.要一一对应

3.用另外一个例子再标注详细一点

4.补充
在MySQL中执行查询语句如下：
ResultSet rs = null;
String sql=“SELECT flow_id,Type,id_card,exam_card,student_name,location,grade FROM examstudent”;
rs = st.executeQuery(sql);
rs:数据集。
rs.getInt(int index);
rs.getInt(String columName);
你可以通过索引或者列名来获得查询结果集中的某一列的值。
例如：while(rs.next)
{
rs.getInt(1)//等价于rs.getInt(“flowid”);
rs.getString(5)//等价于rs.getInt(“student_name”);
}
注意：getInt()和getString()方法的索引值从1开始，表示第一个字段。
三、最后的运行结果图
在这里插入图片描述

布斯安

发布了101 篇原创文章 · 获赞 8 · 访问量 1万+

私信关注

Ajax异步验证-----jQuery

猜你喜欢