前端使用jquery传递对象数组给后端说明及总结

news2024/11/18 21:28:33

1.代码

前端

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>锁定库存</title>
    <%@ include file="/frame/head.jsp" %>
    <%@ include file="/frameNecessary.jsp" %>

    <!-- 日期控件start -->
    <script type="text/javascript" src="${staticBasePath}/libs/js/form/datePicker/WdatePicker.js"></script>
    <!-- 日期控件end -->
    <!-- 树组件start -->
    <script type="text/javascript" src="${staticBasePath}/libs/js/tree/ztree/ztree.js"></script>
    <link type="text/css" rel="stylesheet" href="${staticBasePath}/libs/js/tree/ztree/ztree.css"></link>
    <!-- 树组件end -->
    <link type="text/css" rel="stylesheet" href="${staticBasePath}/libs/css/wms.css"></link>
    <!-- 树形下拉框start -->
    <script type="text/javascript" src="${staticBasePath}/libs/js/form/selectTree.js"></script>
    <!-- 树形下拉框end -->

    <!-- 表单验证start -->
    <script src="${staticBasePath}/libs/js/form/validationRule.js" type="text/javascript"></script>
    <script src="${staticBasePath}/libs/js/form/validation.js" type="text/javascript"></script>
    <!-- 表单验证end -->
    <!-- 异步上传控件start -->
    <script type="text/javascript" src="${staticBasePath}/libs/js/form/upload/fileUpload.js"></script>
    <script type="text/javascript" src="${staticBasePath}/libs/js/form/upload/handlers.js"></script>
    <!-- 异步上传控件end -->
    <!--基本选项卡样式start-->
    <script type="text/javascript" src="${staticBasePath}/libs/js/nav/basicTabModern.js"></script>
    <!--基本选项卡样式end-->
    <!-- 表单异步提交start -->
    <script src="${staticBasePath}/libs/js/form/form.js" type="text/javascript"></script>
    <!-- 表单异步提交end -->
    <!-- 展出提示start -->
    <script src="${staticBasePath}/libs/js/popup/messager.js" type="text/javascript"></script>
    <!-- 展出提示end -->
    <!-- 日期选择框start -->
    <script type="text/javascript" src="${staticBasePath}/libs/js/form/datePicker/WdatePicker.js"></script>
    <!-- 日期选择框end -->
    <script language="JavaScript">
        //表单异步提交处理
        function tijiao() {
            //判断表单的客户端验证时候通 过
            debugger
            var valid = $('#form1').validationEngine({returnIsValid: true});
            var dataList = [];
            var dataObject = new Object();
            var t = $('#form1').serializeArray();
            t.forEach((one) =>{
                console.log(JSON.stringify(dataObject));
                 if(one.name == 'deliveryOrderId' && JSON.stringify(dataObject) != "{}"){
                     dataList.push(dataObject);
                     dataObject = {};
                     dataObject[one.name] = one.value;
                 }else {
                     dataObject[one.name] = one.value;
                 }
            })
            dataList.push(dataObject);
            if (valid) {
                $.ajax({
                    type: 'post',
                    url: '${basePath}/deliveryOrderDetail/lockStorageRecord',
                    contentType: 'application/json',
                    data: JSON.stringify(dataList),
                    success: function (responseText) {
                        var jsondata = responseText;
                        try {
                            jsondata = JSON.parse(responseText);
                        } catch (e) {
                            jsondata = {};
                        }
                        if (jsondata.flag == 'success') {
                            top.Dialog.alert("保存成功", function () {
                                closeDialog();
                            });
                        } else {
                            top.Dialog.alert(jsondata.msg);
                        }
                    }, error: function (a, e) {
                        top.Dialog.alert("服务器异常！");
                    }
                })
            } else {
                top.Dialog.alert('请按要求将表单填写完整！');
            }
        }

        function closeDialog() {
            //刷新数据
            top.frmright['page_' + functionId].searchHandler();
            // 关闭窗口
            top.Dialog.close();
        }

    </script>
</head>

<body>
<div class="box1 float_left" id="formContent" whiteBg="true" panelWidth="98%" panelHeight="480">
    <form id="form1" method="post" enctype="multipart/form-data">
        <table class="tableStyle" style="height:450px;">
            <tr>
                <td width="" valign="top">
                    <table  id="table1" class="tableStyle">
                        <tr>
                            <th>库区类型</th>
                            <th>库位编码</th>
                            <th>数量</th>
                            <th>可用数量</th>
                            <th>有效期</th>
                            <th>锁定数量</th>
                        </tr>
                        <c:forEach var="item" items="${storageRecord}" varStatus="status">
                            <tr>
                                <input type="hidden" name="deliveryOrderId" value="${orderDetail.deliveryOrderId}"/>
                                <input type="hidden" name="id" value="${orderDetail.id}"/>
                                <td>${item.storageType}</td>
                                <td>
                                    <input type="text" id="forzenInfo" name="forzenInfo" value="${item.storageNo}" readonly />
                                </td>
                                <td>${item.quantity}</td>
                                <td>${item.frozenQuantity}</td>
                                <fmt:formatDate value="${item.dueDate}" var="expectTime" type="date" pattern="yyyy-MM-dd HH:mm:ss"/>
                                <td><span>${expectTime}</span></td>
                                <td>
                                    <input type="text" id="lockQty" name="lockQty"/>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button type="button" id="submitBut" onclick="tijiao();"><span
                            class="icon_save">保存</span></button>
                    <div class="spacer_10"></div>
                    <button type="button" id="cacelBut" onclick="top.Dialog.close()"><span class="icon_no">关闭</span>
                    </button>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

后端

package com.qst.security.wms.front.deliveryOrder;

import cn.hutool.core.collection.CollUtil;
import com.alibaba.excel.EasyExcel;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.qst.security.common.vo.PageVo;
import com.qst.security.wms.biz.deliveryOrder.DeliveryOrderBiz;
import com.qst.security.wms.biz.deliveryOrder.DeliveryOrderDetailBiz;
import com.qst.security.wms.common.exception.BusinessException;
import com.qst.security.wms.controller.BaseController;
import com.qst.security.wms.easyExcel.DataEasyExcelListener;
import com.qst.security.wms.entity.basefuncation.GoodsSourceCode;
import com.qst.security.wms.entity.deliveryOrder.DeliveryOrder;
import com.qst.security.wms.entity.deliveryOrder.DeliveryOrderDetail;
import com.qst.security.wms.entity.inventory.InventoryStorageRecord;
import com.qst.security.wms.entity.system.StaffInfo;
import com.qst.security.wms.front.WmsControllerHelper;
import com.qst.security.wms.util.SessionUtil;
import com.qst.security.wms.vo.SessionStaffInfo;
import com.qst.security.wms.vo.deliveryOrder.ErrorMsgVO;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.ArrayList;
import java.util.List;

/**
 * 出库单明细表Controller
 *
 * @author lab
 * @date 2022-12-27
 */
@Slf4j
@Controller
@RequestMapping("/deliveryOrderDetail")
public class DeliveryOrderDetailController extends BaseController {
    /**
     * 锁定库存
     *
     * @param detailList
     * @return
     */
    @PostMapping("/lockStorageRecord")
    @ResponseBody
    public String lockStorageRecord(@RequestBody List<DeliveryOrderDetail> detailList) {
        System.out.println(detailList);
        return WmsControllerHelper.renderSuccessJson();
    }
}

2.画面

3.说明

(1).首先，因为我前端要传递的是多条数据，所以我想用json的方式进行传递，因为form中的enctype可以进行传递数据类型的设置，但是设置之后发现不起作用，请求头中的content-type还是默认的application/x-www-form-urlencoded，后来查找了一下资料，发现enctype不能设置成json类型。

(2)无法设置enctype，我就自己写了一个ajax来发送请求，并设置了contentType: 'application/json',这样设置是可以的，接下来就是传递数据的编辑。

(3)获取form中的数据有两种方式，这个前端是使用jquery写的，这门语言我也不是很了解看，只能去网上查查资料，这两种方式如下：

var t = $('#form1').serializeArray();

 把form表单的值序列化成一个数组，每个提交的项目代表数组中的一个元素，如下：

var a = $('#form1').serialize();

把form表单的值序列化成一个字符串，如下data123:"deliveryOrderId=9&id=26&lockoty=10&deliveryOrderId=9&id=26&lockoty=20

$("#form1").serializeObject()

这种用法我没有试过，是把form表单的值序列化成一个json对象，如{username：admin，password：admin123}

我使用的是第一种方法，获取数组之后进行编辑，每三个项目添加到一个对象中，最后将这些对象添加到数组中，再把数组转换成json字符串传递给后端，后端在参数中添加@RequestBody注解，并使用list进行参数的接受。

(4)form表单中有一个项目我想让他不能修改，并且要提交到表单中去，最早使用的disabled，但是发现这样不能提交到表单中，最后改用readonly就可以了。

4.总结

js创建对象的方法

new构造函数：var person = new Object();
对象字面量：var person = {};

Object.create()：var o1 = Object.create({x:1,y:1});

js中判断对象为空的方法

for-in语句

let isEmpty = (obj) => {
  for(let i in obj){
    return false
  }
  return true
}
console.log(isEmpty({}))//true
console.log(isEmpty({a:1}))//false

JSON.stringify方法

let isEmpty = (obj) => {
  return JSON.stringify(obj) === '{}'
}
console.log(isEmpty({}))//true
console.log(isEmpty({a:1}))//false

Object.keys方法

let isEmpty = (obj) => {
  return !Object.keys(obj).length
}
console.log(isEmpty({}))//true
console.log(isEmpty({a:1}))//false

form表单输入框input设置disable属性提交后，得不到该输入框的值，解决该类问题可以参考下面两个方法：

方法一：使用readonly带替代disabled，即把 disabled="disabled"  修改为 readonly="readonly"

方法二：使用一个type=hidden隐藏要获取值的input，再使用disabled显示给用户看的input

<input type="hidden" name="url" value="https://www.baidu.com"/>
<input type="text" value="https://www.baidu.com" disabled="disabled"/>

disabled不能接收焦点，使用tab键时将被跳过，可能不是successful的；
readonly可以接收焦点但不能被修改，可以使用tab键进行导航，可能是successful的。
注：只有successful的表单元素才是有效数据，即是进行提交后可以获取值。disabled和readonly的文本输入框只能通过脚本进行修改value属性。

使用ajax发送请求的方式

1、　　$.ajax({

　　　　url:"ajaxServlet1111" , // 请求路径

　　　　type:"POST" , //请求方式 

　　　　data:{"username":"jack","age":23},//请求参数

　　　　success:function (data) {

　　　　　　 alert(data);

　　　　　　 },//响应成功后的回调函数

　　　　error:function () {

　　　　　　alert("出错啦...")

　　　　　 },//表示如果请求响应出现错误，会执行的回调函数

　　　　dataType:"text"//设置接受到的响应数据的格式

　　});

2、 $.get()：发送get请求 *

语法：

　　$.get(url, [data], [callback], [type])

*参数：

　　* url：请求路径

　　* data：请求参数

　　* callback：回调函数

　　* type：响应结果的类型

3. $.post()：

　　　　语法：$.post(url, [data], [callback], [type])

* 参数： * url：请求路径 * data：请求参数 * callback：回调函数 * type：响应结果的类型

报错 Unrecognized token 'XXXX': was expecting ('true', 'false' or 'null')，是因为返回或发送数据格式不规范.如果contentType : "application/json"，确认一下发送的数据有没有转换成json格式的数据，如下： 

data:JSON.stringify(param)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/135855.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

苹果，Inter,AMD

苹果，Inter,AMD

1.指令集 & 架构区别 目前世界上主要有两种CPU架构&#xff0c;分别是&#xff1a;x86架构和ARM架构。 目前主流的电脑都是采用x86架构处理器&#xff0c;比如 Intel/AMD处理器。--复杂指令集 手机平板电脑等设备都采用了ARM架构处理器&#xff0c;比如高通&#xff0c;…
阅读更多...
Elasticsearch集群许可证过期问题处理

Elasticsearch集群许可证过期问题处理

当你执行索引相关操作有如下报错&#xff1a; HTTP/1.1 403 Forbidden content-type: application/json; charsetUTF-8 content-length: 384{"error" : {"root_cause" : [{"type" : "security_exception","reason" : "…
阅读更多...
大学STEM教育的技能水平和收获

大学STEM教育的技能水平和收获

2021年一篇文章&#xff0c;有很多断章取义的解读&#xff0c;本身这篇文章也有很多主观性强的输出。 文章数据都是2020年之前。 Received: 6 June 2020; Accepted: 27 January 2021; 长达17页的论文&#xff0c;看了一遍&#xff0c;觉得构思很巧妙。 类似一篇精心设计的实验…
阅读更多...
同样是断言，为何 Hamcrest 如此优秀？

同样是断言，为何 Hamcrest 如此优秀？

根据项目对象模型&#xff08;POM&#xff09;的概念&#xff0c;Maven 可以管理一个项目的依赖关系、构建、报表以及信息中心的部分文档。 hamcrest 断言 maven依赖&#xff1a; 1080160 26.3 KB hamcrest支持多种语言&#xff0c;这里以 Java 为例&#xff1a; 进入到 hamcre…
阅读更多...
新兴新能源设施[2]--盐穴压缩空气储能预警模块开发

新兴新能源设施[2]--盐穴压缩空气储能预警模块开发

新兴新能源设施[2]--盐穴压缩空气储能预警模块开发1. 总体方案设计2 脉冲发生装置的部件设计2.1 脉冲发生装置基础选型2.2 相关技术指标1. 总体方案设计 盐穴储能注气排卤预警短节远程传输系统硬件的总体设计框架如图1&#xff08;a&#xff09;所示&#xff0c;其前端监测模块…
阅读更多...
削波导致的振动值偏小

削波导致的振动值偏小

今天接到计量院的反馈&#xff0c;说振动表在250Hz时&#xff0c;振动台开100um时&#xff0c;测下来只有89um。我在公司试了下&#xff0c;发现250Hz、100um时&#xff0c;振动的大小是78.5mm/s&#xff0c;有效值是78.5*0.70755.5mm/s&#xff0c;这时传感器的输出电压是2320…
阅读更多...
怎样识别图片中的文字?手机电脑都可以的

怎样识别图片中的文字?手机电脑都可以的

普通人过普通的生活就好&#xff0c;简单而平淡。而平淡的生活常常可以看到各种图片文字&#xff0c;毕竟遇到要记录重要的信息拍一拍就可以解决问题了&#xff0c;很简单的。通常情况下&#xff0c;我们都会再次检查相册中的关键信息&#xff0c;甚至有时我们还要整理出里面的…
阅读更多...
10_1、Java基本语法之枚举类的使用

10_1、Java基本语法之枚举类的使用

一、枚举类的引入 当在项目中使用一个或多个变量或常量表示某种状态时&#xff0c;比如&#xff0c;星期&#xff1a;星期一...星期天、就职状态&#xff1a;在职、离职...复岗等时&#xff0c;这些情况类的对象只有有限个&#xff0c;是确定的。这时就可以使用枚举类来定义这些…
阅读更多...
信息安全技术 代码安全审计规范

信息安全技术 代码安全审计规范

声明 本文是学习GB-T 39412-2020 信息安全技术 代码安全审计规范. 下载地址 http://github5.com/view/789而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 代码安全审计规范 范围 本标准规定了代码安全的审计过程及方法&#xff0c;描述了软件代码安全…
阅读更多...
Ubuntu 20.04 交叉编译opencv4.6.0

Ubuntu 20.04 交叉编译opencv4.6.0

一、环境 sudo apt-get install build-essential sudo apt-get install cmake git libgtk2.0-dev pkg-config libavcodec-dev libavformat-dev libswscale-dev sudo apt-get install python-dev python-numpy libtbb2 libtbb-dev libjpeg-dev libpng-dev libtiff-dev libjas…
阅读更多...
Word处理控件Aspose.Words功能演示：在 Java 中将 DOCX 转换为 JSON

Word处理控件Aspose.Words功能演示：在 Java 中将 DOCX 转换为 JSON

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c; Aspose API支持流行文件格式处…
阅读更多...
优化温度检测工程架构的心得

优化温度检测工程架构的心得

一、硬件与架构设计 本项目中用到的设备有&#xff1a;PC、FPGA、温度传感器DS18B20、蜂鸣器&#xff08;beep&#xff09;、数码管&#xff08;segment&#xff09;。 对于本次的项目&#xff0c;我的任务是将之前的温度检测项目的架构再进行细分&#xff0c;以及将相应的代…
阅读更多...
Linux 监控服务器GPU状态

Linux 监控服务器GPU状态

文章目录1 前言2 监控GPU状态2.1 使用nvidia-smi2.2 使用gpustat1 前言 深度学习需要使用GPU进行训练学习&#xff0c;在训练我们的模型时&#xff0c;我们需要直到GPU的状态&#xff0c;以帮助我们监控程序的运行。下面就介绍几种简单的方式来展示GPU的状态 2 监控GPU状态 …
阅读更多...
基础算法 - 常见算法模板题（最简洁写法）【上】

基础算法 - 常见算法模板题（最简洁写法）【上】

目录 快速排序 第k个数 归并排序 逆序对的数量 二分查找 数的范围 浮点数二分 高精度 高精度加法 高精度减法 高精度乘法&#xff08;高精度x低精度&#xff09; 高精度除法 前缀和与差分 前缀和 子矩阵的和 差分 差分矩阵 快速排序 思路&#xff1a; 确认分界点&#…
阅读更多...
【操作系统】Linux性能优化诊断pidstat+mpstat详解

【操作系统】Linux性能优化诊断pidstat+mpstat详解

文章目录1.CPU压测环境准备2.pidstatmpstat命令详解3.CPU密集型应用案例实战4.IO密集型应用案例实战5.CPU多进程调度案例实战6.pidstat命令详解进阶7.性能监控命令vmstat详解8.CPU上下文切换案例实战9.top、mpstat、pidstat、vmstat中wait含义1.CPU压测环境准备 &#xff08;1…
阅读更多...
以人为本的方法打击身份欺骗

以人为本的方法打击身份欺骗

身份的概念是动态的——它一直在变化。在人类历史的大部分时间里&#xff0c;一个人的身份由他们的名字、他们的家庭关系和他们居住的地方组成。身份只有三四个元素。在过去的 100 年里&#xff0c;随着护照和其他身份证明文件的广泛使用&#xff0c;人们的身份也增加了额外的元…
阅读更多...
Qt5 高分辨率支持

Qt5 高分辨率支持

1. 结论 先说结论&#xff0c;在Qt5版本没有比较完美的解决方案。如果使用Qt系统提供的支持方式会出现各种小问题。如果可以的&#xff0c;建议升级为Qt6版本&#xff0c;能够更好支持高分辨率屏。而最终我在Qt5.12.12版本中&#xff0c;采用的方案是通过各种方法组合解决。 详…
阅读更多...
【我和openGauss的故事】openGauss获奖项目讲解

【我和openGauss的故事】openGauss获奖项目讲解

文章目录前言参赛方案介绍系统需求分析主要功能模块设计思路字段基本数据分析页面及功能设计功能函数视图设计技术亮点及优势商业模式及市场前景功能测试项目总结前言 2022年8月30日华为鲲鹏应用大赛openGauss赛道上海赛区第三名获奖作品开源分享&#xff0c;我们团队参加本次…
阅读更多...
再学C语言23：分支和跳转——if语句

再学C语言23：分支和跳转——if语句

一、简单if语句 if语句被称为分支语句&#xff08;branching statement&#xff09;或选择语句&#xff08;selection statement&#xff09;&#xff0c;功能是让程序选择分支中的一条前进 if语句一般形式&#xff1a; if(expression)statement 如果expression的值为真&am…
阅读更多...
【数据结构】LeetCode移除链表元素、反转链表、链表的中间结点

【数据结构】LeetCode移除链表元素、反转链表、链表的中间结点

目录 一、移除链表元素 1、题目说明 2、题目解析 二、反转链表 1、题目说明 2、题目解析 三、链表的中间结点 1、题目说明 2、题目解析 一、移除链表元素 1、题目说明 题目链接&#xff1a;移除链表的元素 给你一个链表的头节点 head &#xff0c;和一个整数 val&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023