Ajax+Servlet

薛定不饿

于 2021-08-15 19:39:38 发布

阅读量272

点赞数 1

分类专栏：笔记文章标签： jquery ajax javaweb

本文链接：https://blog.youkuaiyun.com/qq_44760975/article/details/119718227

版权

笔记专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何利用Ajax和Servlet技术，在学生选课系统中实现实时检查输入的学号是否已存在的功能。当鼠标离开学号输入框时，通过Ajax发送POST请求到Servlet，Servlet查询数据库，如果学号存在则返回'yes'，前端接收到响应后弹出警告提示用户更换学号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学生选课系统

功能：使用Ajax+Servlet，实现鼠标从学号文本输入域离开后，如果该学号在数据库中已经存在，使用alert提示：“该学号已存在，请输入其它学号”。

Ajax代码

<script>
   $(function () {
   		$("#sno").blur(function () {
        var num = $(this).val();
        if (num == '') {
        	$("#sp1").text('学号不能为空 ×')
        	$("#sp1").css('color', 'red')
        	$(this).focus()
        } else {
        	$("#sp1").text('√')
            $("#sp1").css('color', 'green')
            $("#name").focus()
        }
        $.ajax({
        	method: "post",
            url: "show.do",
            data:{
            	action: "sno",
            	content: $("#sno").val()
            },success: function (data) {
            	if (data == "yes") {
                alert("学号已存在！");
                $("#sno").focus();
            	}
        	}
        })
    })
</script>

html代码

<p>
    学号：<input type="text" id="sno" name="sno" placeholder="输入学号" required autofocus>
    <span id="sp1"></span>
</p>

Servlet代码

@SneakyThrows
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
	String sno = req.getParameter("content");
    String sql = "select count(*) from t_student where sno = ?";
    Object value = Query.selectSingleValue(sql, sno);
    if ((long) value > 0) {
    	resp.getWriter().write("yes");
    }
}