前端:form多个字段传递给后台,保存至数据库。(序列化form表单内容)

13 篇文章 0 订阅
11 篇文章 0 订阅

serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。 

<script>
    let allData = {}    
    $.each($('form').serializeArray(), function () {
              allData[this.name] = this.value;
          });
          console.log(allData);//全部表单字段,名值对形式:{name: value}
</script>

传给后台:

<script>
     $.ajax({
              type:"post",
              url:"/xxxx",
              dataType:"json",
              data:JSON.stringify(allData),
              success: function (res){
                  //do something
              }
          });
</script>

 后台接收:

1、python形式

 # 添加公告
    @staticmethod
    def add_notice(request):
        data = {}
        data = json.loads(request.body.decode()) #  将json格式数据转换为字典
        data["notice_id"] = idCreater.appKeyWorker.get_id()
        data["create_time"] = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        print(data)
        Notice.objects.create(**data)
        return JsonResponse({"state": 200, "msg": "success"}, json_dumps_params={'ensure_ascii': False})

 

2、Java形式 

 <script>
    var allData = {};
        var t = $('form').serializeArray();
        console.log("t===>",t)
        $.each(t, function () {
            allData[this.name] = this.value;
        });
        console.log(allData);
        $.ajax({
            type:"POST",
            url:"/addUser",
            data:JSON.stringify(allData),
            contentType:'application/json;charset=utf-8',
            dataType:"json",
            success:function (res) {
                // do something
            },
            error:function () {
               // do something
            }
        });
 </script>

 

    @PostMapping("/addUser")
    @Transactional()
    public Object addUser(@RequestBody UsersEntity user){
        Result result = new Result();
        String otp = webSMSRedis.get(user.getPhone());

        if (EmptyUtils.isEmpty(otp)){
            result.setCode(1);
            result.setMsg("验证码已过期,请重新获取!");
            return result;
        }
        if (!otp.equals(user.getsMSCode())){
            result.setCode(1);
            result.setMsg("验证码错误,请重新输入!");
            return result;
        }
        if (webUsersService.insertUser(user)>0){
            result.setCode(0);
            result.setMsg("注册成功");
            return result;
        }
        result.setCode(1);
        result.setMsg("注册失败,请稍后再试试");
        return result;
    }

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,我们需要定义一个实体类,其中包含保存图片的字段。例如: ```java @Entity @Table(name = "product") public class Product { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; @Lob private byte[] image; // 省略getter和setter方法 } ``` 在这个实体类中,我们使用了`@Lob`注解来指定该字段需要保存对象。接下来,我们需要编写一个Controller类来处理上传图片和展示图片的请求。 ```java @Controller public class ProductController { @Autowired private ProductService productService; @GetMapping("/product/{id}") public ResponseEntity<byte[]> getProductImage(@PathVariable Long id) { Product product = productService.getProductById(id); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.IMAGE_JPEG); return new ResponseEntity<>(product.getImage(), headers, HttpStatus.OK); } @PostMapping("/product") public String saveProduct(@RequestParam("name") String name, @RequestParam("image") MultipartFile file) throws IOException { Product product = new Product(); product.setName(name); product.setImage(file.getBytes()); productService.saveProduct(product); return "redirect:/"; } } ``` 在这个Controller类中,我们定义了两个方法:`getProductImage`和`saveProduct`。`getProductImage`方法用于根据产品ID获取对应的图片,`saveProduct`方法用于保存新的产品信息到数据库中。 在`saveProduct`方法中,我们使用`@RequestParam`注解来获取前端页面传递过来的产品名称和图片文件。然后,我们创建一个新的`Product`对象,并将产品名称和图片数据设置到该对象中。最后,我们调用`ProductService`的`saveProduct`方法来保存对象数据库中。 在`getProductImage`方法中,我们首先根据产品ID从数据库中获取对应的`Product`对象。然后,我们使用`HttpHeaders`对象来设置返回结果的`Content-Type`为`image/jpeg`,表示返回的是JPEG格式的图片数据。最后,我们使用`ResponseEntity`对象来返回图片数据。 最后,我们需要在前端页面中展示图片。例如: ```html <img src="/product/1" alt="product image"> ``` 在这个例子中,我们使用`<img>`标签来显示产品图片。其中,`src`属性的值为`/product/1`,表示需要根据产品ID为1获取对应的图片。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值