jQuery_表单异步提交

最新推荐文章于 2021-04-01 04:05:25 发布

pseudonym_

最新推荐文章于 2021-04-01 04:05:25 发布

阅读量328

点赞数 1

分类专栏： JQuery 文章标签： jquery ajax表单提交 json

本文链接：https://blog.csdn.net/pseudonym_/article/details/76329074

版权

JQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. JSP页面

<form id="form1">
        用户名：<input type="text" name="username" id="username"><br><br>
        密&nbsp;&nbsp;码：<input type="password" name="password"
            id="password"><br><br> 
        邮&nbsp;&nbsp;箱：<input type="text" name="email" id="email"><br><br> 
    <input type="button" value="异步提交表单" id="formbutton" />
</form>

2. ajax表单数据json提交
第一种，自己往json中添加数据。

<script type="text/javascript">
    $(function() {
        $("#formbutton").click(function() {
            $.ajax({
                url : "formServlet",
                data : {
                    username : $("#username").val(),
                    password : $("#password").val(),
                    email : $("#email").val(),
                },

                type : "POST",
                success : function(data) {
                }
            })
        })
    })
</script>

第二种，通过序列化数组

<script type="text/javascript">
    $(function() {
        $("#formbutton").click(function() {
            //将表单里的选项，序列化成一个字符串
            var data = $("#form1").serializeArray();
            //将信息打印到网页上的控制台
            console.info(data);
            //alert(data);
            $.ajax({
                url : "formServlet",
                data:data,
                type:"POST",
                success : function(data) {

                }
            })
        })
    })
</script>

3. ajax表单数据字符串提交

<script type="text/javascript">
    $(function() {
        $("#formbutton").click(function() {
            //将表单里的选项，序列化成一个字符串
            var data = $("#form1").serialize();
            $.ajax({
                url : "formServlet",
                data:data,
                type:"POST",
                success : function(data) {

                }
            })
        })
    })
</script>

4. Servlet
接收请求参数，并对请求参数进行操作。

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");

        String username=request.getParameter("username");
        String password=request.getParameter("password");

        String email=request.getParameter("email");

        System.out.println(username);
        System.out.println(password);
        System.out.println(email);
        PrintWriter out = response.getWriter();
    }