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

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

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

![20190426120746199.png][]![20190426120802886.png][]![20190426120822783.png][]

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();
        }

[20190426120746199.png]: https://img-blog.csdnimg.cn/20190426120746199.png
[20190426120802886.png]: https://img-blog.csdnimg.cn/20190426120802886.png
[20190426120822783.png]: https://img-blog.csdnimg.cn/20190426120822783.png

发表评论取消回复

表情：

评论列表（有 0 条评论，93人围观）

还没有评论，来说两句吧...

相关阅读

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

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

忘是亡心i/ 2023年10月18日 17:43/ 0 赞/ 94 阅读

相关使用Jquery serialize序列化Form表单

HTML代码 <form> <div class="login-screen"> <div class="login-form">

﹏ヽ暗。殇╰゛Y/ 2022年07月30日 14:27/ 0 赞/ 269 阅读

相关 jquery序列化表单并ajax提交

1.准备好form表单 <form method="post"> <input type="text" name="username"

女爷i/ 2022年07月12日 06:12/ 0 赞/ 365 阅读

相关 jQuery序列化表单的方法总结（serialize()、serializeArray()）

我的个人博客开通了，地址：[https://timewentby.com][https_timewentby.com] 欢迎访问 \\jQuery序列化表单的方法总结现在

「爱情、让人受尽委屈。」/ 2022年06月15日 04:13/ 0 赞/ 197 阅读

相关 select表单序列化serialize()出现问题

今天在序列化select时，遇到了一个问题 HTML： <input name="id" type="text"/> <select class=

我会带着你远行/ 2022年06月04日 07:44/ 0 赞/ 242 阅读

相关 jquery 表单序列化

jQuery序列化表单的方法总结现在这里贴出案例中静态的html网页内容： <!DOCTYPE html> <html lang="zh">

左手的ㄟ右手/ 2022年05月27日 07:39/ 0 赞/ 160 阅读

相关 jQuery序列化表单数据 serialize()、serializeArray()及使用

1、 serialize() 方法：　　serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。　　您可以选择一个或多个表单元素（比如 input

谁践踏了优雅/ 2022年03月30日 14:24/ 0 赞/ 203 阅读

相关 jquery序列化表单

譬如提交一个登陆的from表单： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

一时失言乱红尘/ 2022年03月15日 07:40/ 0 赞/ 229 阅读

相关 jquery Ajax serialize()表单进行序列化方式上传文件

通过Ajax serialize()表单进行序列化方式上传文件，使用FormData进行Ajax请求通过传统的form表单提交的方式上传文件： <form id=

清疚/ 2021年07月26日 19:55/ 0 赞/ 282 阅读

相关 jQuery serialize()、serializeArray()方法实现表单序列化

serialize() serialize()方法作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串。与JQuery中其他方法一样，serialize

冷不防/ 2021年06月24日 16:11/ 0 赞/ 326 阅读