表单过滤数据提交--使用lodash

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>

<body>

</body>
<script>
    var formData = {
        username: '',//用户名
        nickname: 'tom',//昵称
        age: undefined,//年龄
        hobby: null,//兴趣
        sex: 0,//性别,0-女, 1-男
    }
    /*
    var filterFormData = {}
    for (const key in formData) {
        if (formData[key] || formData[key] === 0) {
            filterFormData[key] = formData[key]
        }
    }

    console.log(filterFormData)
    */
    //优化思路1-es6里面有没有好的方法
    //优化思路2-lodash里面有没有好的方法(推荐)
    //_.omitBy忽略
    // var filterFormData = _.omitBy(formData, )
    // var filterFormData = _.omitBy(formData, (value, key)=>_.isEmpty(value))
    var filterFormData = _.omitBy(formData, (value, key) => _.isEmpty(value) && !_.isNumber(value))
    console.log(filterFormData)
</script>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,使用 axios 将表单数据提交给 Spring Boot 后端的实现步骤如下: 1. 在前端,获取表单数据可以使用 jQuery 的 serialize 方法,将表单中的数据序列化为 URL 编码的字符串。 2. 使用 axios 发送 POST 请求到 Spring Boot 后端,将序列化后的表单数据作为请求体发送。 3. 在 Spring Boot 后端,定义一个 POST 接口,使用 @RequestBody 注解将请求体中的数据映射为 Java 对象。 下面是一个基本的示例代码: ```javascript // HTML 表单 <form id="my-form"> <input type="text" name="username" value="" /> <input type="password" name="password" value="" /> <button type="submit">Submit</button> </form> // JavaScript 代码 $('#my-form').on('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 var formData = $(this).serialize(); // 序列化表单数据 axios.post('url/to/springboot/api', formData) .then(function(response) { console.log(response.data); }) .catch(function(error) { console.log(error); }); }); // Spring Boot 后端代码 @RestController @RequestMapping("/api") public class MyController { @PostMapping("/submit") public String handleSubmit(@RequestBody MyForm form) { // 处理表单数据,form 对象中包含表单中的数据 return "success"; } } // 表单数据的 Java 对象定义 public class MyForm { private String username; private String password; // getter 和 setter 方法省略 } ``` 其中,`url/to/springboot/api` 是 Spring Boot 后端接口的 URL 地址,需要替换为实际的地址。`MyForm` 类是表单数据的 Java 对象定义,可以根据表单的实际情况进行修改。在后端,使用 @RequestBody 注解将请求体中的数据映射为 Java 对象,可以方便地进行处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值