form表单的应用

最新推荐文章于 2023-04-28 00:03:48 发布

原创最新推荐文章于 2023-04-28 00:03:48 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #表单

本文详细介绍了form表单的使用流程，包括页面值获取、数据有效性验证、服务层值传递及返回值处理，同时展示了如何利用JavaScript进行数据判断及回填，使表单操作更加简洁高效。

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

form表单相信很多人都用过，它相比普通的写法更省代码，简洁；那下面我们来了解一下过程：

第一步：页面获取值；

第二步：页面值判断；（能不能为空或者其他限制条件）

第三步：传值到服务层；

第四步：接收返回值；

form表单就是处理页面和逻辑层或者服务层的值得传输，所有很多人只是用了它的传值的功能，而from表单不仅仅只是传值简单，接收和判断都是比一般的写法简洁很多，下面就了解一下这些过程是如何实现的：

1.页面代码：

Method是表示提交方式，一般都写post;而onsubmit是提交触发事件，它是用来提交前判断数据是否符合规定；

2.判断提交数据是否符合规定；

 function check(form) {
              if(form.HeTongMingChen.value=="") {
                  layer.msg("合同名称不能为空！", {icon : 0,title : '提示',time:1500});
                  form.HeTongMingChen.focus();
                  return false;
              }
              if(form.JuTuanBiaoMa.value=="") {
                  layer.msg("集团编码不能为空！", {icon : 0,title : '提示',time:1500});
                  form.JuTuanBiaoMa.focus();
                  return false;
              }

        return true

}

3.接收返回值；

$("#form1").ajaxForm(function(data){

        if(data){

            layer.msg("操作成功", {icon : 1,title : '提示',time:2000});            }else{

            layer.msg("操作失败", {icon : 0,title : '提示',time:2000});

        }

});

我这里返回的是true和false,让它判断这一步操作是否成功；然后提示需要提示的语句；

4.回填（修改一般是需要数据回填）

$.get("请求路径", {

      updataTaWangByIdFillDataID :taWangYongHuiZiLiaoID.val()

      }, function(data) {   

loadDatatoForm("form1",data[0]);

});

我这里是修改回填，updataTaWangByIdFillDataID是要进行修改的那条数据的id，把它传过去进行查询，然后把查询的数据返回，进行回填，而回填只需要一句就行，不用一个一个写出来，loadDatatoForm("form1",data[0]); 直接一句话进行回填；

loadDatatoForm("表单id",返回的数据)；

效果图：

但要注意的是返回的数据必须和html中name值对应，无论是传值还是回填，name值都必须对应；如在MyEclipse 10中，在服务层如何取值呢?

String TongYiBiaoMa=request.getParameter("id");

String JuTuanKeHuiMC=request.getParameter("name");

name值必须相同；