温馨提示×

layui怎么获取表单数据

小亿
729
2024-01-23 10:37:10
栏目: 编程语言

在layui中获取表单数据有两种常用的方法:

  1. 使用layui的form模块,通过监听提交事件来获取表单数据。 首先需要引入layui的form模块:

    layui.use('form', function(){
      var form = layui.form;
    });
    

    然后监听表单的提交事件,通过form.on('submit(formDemo)', function(data){})来获取表单数据,其中formDemo为表单的lay-filter属性值。

    form.on('submit(formDemo)', function(data){
      var formData = data.field;
      // 获取表单数据
      // formData中包含了表单中的所有字段和对应的值
      return false; // 阻止表单跳转
    });
    

    在上述代码中,data.field即为表单数据,可以通过data.field.fieldName来获取指定字段的值。

  2. 使用jQuery或原生JavaScript来获取表单数据。 首先需要使用layui的layui.form.render()方法对表单进行渲染,然后可以使用jQuery的serialize()方法来获取表单数据。

    layui.use(['form', 'jquery'], function(){
      var form = layui.form;
      var $ = layui.jquery;
      
      form.render();
      
      $('#formId').on('submit', function(e){
        e.preventDefault();
        var formData = $(this).serialize();
        // 获取表单数据
        // formData为表单序列化后的字符串
      });
    });
    

    在上述代码中,formId为表单的id属性值,可以通过$(this).serialize()来获取表单数据。

0