使用jQuery实现Ajax 表单的序列化.serialize() (二）-蒲公英云

使用jQuery实现Ajax 表单的序列化.serialize() (二）

忘是亡心i 2023-10-18 17:43 145阅读 0赞

登录时，用无刷新实现，有表单提交的Servlet中处理数据响应到页面!

JSP页面

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" >
    $(function () {
        $("#btn1").click(function () {
            //$("#frm").serialize()提交参数
            $.getJSON("login",$("#frm").serialize(),function (data) {
                //alert(data);
                //清空
                $("#frm").find("~p").remove();
                if(data==1){
                    $("#frm").after("<p>登录成功！</p>")
                    $("#frm").find("~p").css("color","blue");
                }else{
                    $("#frm").after("<p>登录失败！</p>")
                    $("#frm").find("~p").css("color","red");
                }
            })
        })
    });
</script>
<body>
<form id="frm">
    姓名: <input type="text" name="uname" value="John" /><br />
    密码: <input type="text" name="upass" value="123456" /><br />
    <input name="sub" type="button" value="注册"  id="btn1"/>
</form>
</body>

Servlet处理

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        //
        request.setCharacterEncoding("utf-8");
        //
        String name =request.getParameter("uname");
        String pwd =request.getParameter("upass");
        //
        if("John".equals(name) && "123456".equals(pwd)){
            out.println(1);
        }else{
            out.println(0);
        }
        out.flush();
        out.close();
    }