form表单—2种提交方式

最新推荐文章于 2025-06-18 10:00:00 发布

原创最新推荐文章于 2025-06-18 10:00:00 发布 · 1.5w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#表单

前后台交互-form 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HTML、JavaScript和Java实现表单提交，包括仅提交数据而不接收返回值及提交数据并接收返回值的场景。提供了从客户端到服务器端的具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只提交参数到后台，不接收返回值

html代码

<!--第1步:设置 action,method-->
<form id="editForm" action="app/edit/destination" method='POST'>
    <!--第2步：表单元素 -->
    <div>
        名称<input id="getName" name="name" />
    </div>

    <div>
        id<input id="getAreaId" name="id" />
    </div>
    <div>
        纬度<input id="getName" name="latitude" />
    </div>

    <div>
        经度<input id="getAreaId" name="longitude" />
    </div>
    <!--第3步：提交方式 submit-->
    <input type="submit" value="获取" />
    </form>

js代码

<script>
/*如果需要做表单验证，如果不做表单验证，js代码可以省略*/
    $("#editForm").validate({
        /*第1步：做表单验证，省略*/
        /*第2步：提交表单到后台   */
        submitHandler : function(form) {
            form.submit();   
        }
    })
</script>

java代码

@ResponseBody
@RequestMapping(value = "edit/destination", method = RequestMethod.POST)
public void editDestination(Long id, String name, Float longitude, Float latitude, String username) {
        //处理参数，没有返回值
    }

提交参数到后台，并且接收后台返回值

html代码

    <form id="editForm">
        <div>
            名称<input id="getName" name="name" />
        </div>

        <div>
            id<input id="getAreaId" name="id" />
        </div>
        <div>
            纬度<input id="getName" name="latitude" />
        </div>

        <div>
            经度<input id="getAreaId" name="longitude" />
        </div>
        <input type="submit"  value="提交" />
    </form>

如果需要做表单验证 js代码如下：

    <script>
        $("#editForm").validate({
            //做表单验证
            rules : {
                name : { //格式：domId: 规则
                    minlength : 2,//无效
                    maxlength : 30,
                    required : true
                }
            },
            messages : {
                name : {
                    required : "请输入第一个参数",
                    minlength : jQuery.validator.format("至少需要{0}字符"),
                    maxlength : jQuery.validator.format("不能超过{0}字符")

                }

            },
            //验证成功后提交参数
            submitHandler : function(form) {
                ajaxSubmit();
            }
        });

        function ajaxSubmit() {
            $.ajax({
                async : false,
                cache : false,
                type : 'POST',
                data : $("#editForm").serialize(),
                url : "app/edit/destination",//请求的action路径  
                error : function() {//请求失败处理函数  
                    alert('失败');
                },
                success : function(data) { //请求成功后处理函数。    
                    alert(data);
                }
            });
        }
    </script>

如果不需要做表单验证，js代码如下：

 <!--input提交按钮改为如下--> 
<input type="button" onclick="ajaxSubmit()" value="提交" />

<script>
        function ajaxSubmit() {
            $.ajax({
                async : false,
                cache : false,
                type : 'POST',
                data : $("#editForm").serialize(),
                url : "app/edit/destination",//请求的action路径  
                error : function() {//请求失败处理函数  
                    alert('失败');
                },
                success : function(data) { //请求成功后处理函数。    
                    alert(data);
                }
            });
        }
</script>

java代码

@ResponseBody
@RequestMapping(value = "edit/destination", method = RequestMethod.POST)
public long editDestination(Long id, String name, Float longitude, Float latitude, String username) {
        long result = 0; 
        /*处理参数*/
        return result;
}