form表单—2种提交方式

来源：互联网发布：easyui tooltip 源码编辑：程序博客网时间：2024/05/10 10:32

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

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

0 0