form表单同步提交和异步提交

关注

转载最新推荐文章于 2026-09-07 21:52:58 发布 6.7k 阅读 AI 写同款· GEO 优化 ›

Ajax第二天学习总结—— form表单与模板引擎(form表单的基本使用、通过Ajax提交表单数据、案例-评论列表、模板引擎、art-template模板引擎、案例-新闻列表、模板引擎的实现原理) (一)form表单的基本使用 1.表单表单在网页中主要负责数据采集功能。HTML中标签，就是用于采集用户输入的信息，并通过标签的提交操作，把采集的信息提交到服务器端进行处理 2.表单的组成部分表单标签表单域：包含了文本框，密码框，隐藏域(type = 'hidden')，多行文本框，复选框，单选框，下拉选择框和文件上传框等等表单按钮：通过设置type属性为submit来触发form表单的提交 3.<form>标签的属性 <form>标签用来采集数据，<for 阅读详情

同步提交：
html:

<form id="form" method='"post" action="${ctx}/user/saveUser">
    <input type="text" id="name" name="name" value="${user.name}"/>
    <input type="text" id="age" name="age" value="${user.age}"/>
</form>
<input id="save-btn" type="submit" value="保存"/>1
2
3
4
5

controller:

@RequestMapping(value = "/saveUser",method = RequestMethod.POST)
    public String saveUser(User user,HttpServletRequest request, HttpServletResponse response) throws Exception {
        try{
            userService.save(user);
        }catch (Exception e){
            e.printStackTrace();
        }
        return "redirect:/user/userList";
    }1
2
3
4
5
6
7
8
9

ajax异步提交：
注意：form标签去掉method和action属性，保存按钮input标签类型变为button
* controller方法中返回String,则ajax中dataType类型为’text’, *
html:

<form id="form">
    <input type="text" id="name" name="name" value="${user.name}"/>
    <input type="text" id="age" name="age" value="${user.age}"/>
</form>
<input id="save-btn" type="button" value="保存"/>
<script>
    $(document).ready(function() {
            //表单异步提交
            $("#save-btn").on("click",function(){
                $.ajax({ 
                    type: 'post', 
                    data: $('#form').serialize(), 
                    url: '${ctx}/user/saveUser',
                    cache:false,  
                    dataType:'text', 
                    success: function (data) {
                        if("fail"!=data){
                            layer.msg('保存成功');
                            window.location.href = "${ctx}/user/userList?userId="+data;
                        }else{
                            layer.msg('保存失败');
                        }
                    }   
                })
            })
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

controller:

@RequestMapping(value = "/saveUser",method = RequestMethod.POST)
    public String saveUser(User user,HttpServletRequest request, HttpServletResponse response) throws Exception {
        try{
            User user = userService.save(user);
            return user.getUserId();
        }catch (Exception e){
            e.printStackTrace();
            return "fail";
        }
    }