AJAX练习

最新推荐文章于 2025-06-11 09:32:06 发布

Sakii.

最新推荐文章于 2025-06-11 09:32:06 发布

阅读量208

点赞数 2

文章标签： ajax 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_73971785/article/details/145836666

版权

表单验证用户名是否存在

构建页面 jsp html
引入jquery的js文件
构建表单或者输入用户名的input标签
考虑什么情况下（什么事件触发验证的ajax）（
不用jdbc不用数据库模拟“admin用户”）
Ajax发送异步请求验证数据（拿到服务端的结果并局部更新页面）
编写服务端的servlet处理ajax的请求
相应结果给客户端

前台页面:

<head>
    <meta charset="UTF-8">
    <title>AJAX测试页</title>
    <!--引入jQuery的js-->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
</head>
<body>
    ID:<input type="text" id="username" onblur="sendAjax()"/><br>
    <span id="msg"></span><br>
</body>
<script type="text/javascript">
    // 发送ajax的方法
    function sendAjax(){
        // 获取当前输入框的id
        var username = $("#username").val();
        // 调用jquery的ajax方法发送请求
        $.ajax({
            url : "ajax/getName?username="+username,
            type : "post",
            success : function(data) {
                // 获取服务器返回内容后显示在页面上
                $("#msg").html(data);
            }
        });
    }
</script>
</html>

Servlet代码:

public class AJAXServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String result = "";
        if(username!=null && username.equals("zhangsan")){
            result = "is exist";
        }else{
            result = "not exist";
        }

        response.getWriter().write(result);
    }

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