动态组装Form提交数据并跳转

本文介绍了一种在MVC框架中使用动态生成的Form表单来提交JSON数据的方法,通过Kendo模板引擎将JSON数组转换为表单元素,实现跨页面的数据传递。

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

    MVC中无法Post json数据到另外一个页面,可以动态组装一个Form提交到新页面。见如下代码:

<script>
    var data = ["34", "34343", "43t43t"];

    function postForm(data) {
        //var newForm = $('<form>', {
        //    'action': '/scm/Config/Modify',
        //    'target': '_top',
        //    'method': 'post'
        //});

        //newForm.append($('<input>', {
        //    'name': 'q',
        //    'value': 'stack overflow1',
        //    'type': 'hidden'
        //})).append($('<input>', {
        //    'name': 'q',
        //    'value': 'stack overflow2',
        //    'type': 'hidden'
        //})).append($('<input>', {
        //    'name': 'q',
        //    'value': 'stack overflow3',
        //    'type': 'hidden'
        //}))

        //newForm.appendTo('body').submit().remove();

        var template = kendo.template($("#formTempalte").html());

        var result = template(data); //Execute the template
        $(result).appendTo('body').submit().remove();
    }    

</script>

<script id="formTempalte" type="text/template">
    <form action="/scm/Config/Modify" target="_top" method="post">
        # for (var i = 0; i < data.length; i++) { #
            <input type="hidden" name="q" value="#= data[i] #" />
        # } #
    </form>
</script>


我发现我没有正确获取update的值,请你帮我检查改正 import { Card, Form, Input, Select, Button, message, DatePicker, Modal} from 'antd'; import { useEffect, useState } from "react"; import { useNavigate, useParams } from 'react-router-dom'; import { LawEditItem, LawContentItem } from '../type/type'; import { getLawInitDetail, updateLaw } from '@/api/lawEdit'; import dayjs from 'dayjs'; import { AiOutlineBars } from 'react-icons/ai'; import { useErrorHandler } from '@/lib/useErrorHandler'; import CommonLoading from '@/components/CommonLoading'; const { Option } = Select; export default function LawEditPage() { const navigate = useNavigate(); const { lawRegulationId } = useParams();//从参数中获取law id const [form] = Form.useForm(); const [formData, setFormData] = useState({}); const [summary, setSummary] = useState(""); // 记录摘要内容 const maxLength = 200; // 限制最大字符数 const [lawDataParam, setLawDataParam] = useState<LawContentItem[] | null>(null); // fetch API Loading const [isLoading, setIsLoading] = useState(false); // 共通处理Error const { handleError } = useErrorHandler(); useEffect(() => { //调用API获取一条法律法规的信息放入form中 const loadLawDetail = async () => { setIsLoading(true); try { const initData = await getLawInitDetail(Number(lawRegulationId)); const data = { lawRegulationId: initData.lawRegulationId, title: initData.title, releaseDate: initData.releaseDate ? dayjs(new Date(initData.releaseDate).toLocaleDateString('zh-CN')) : null, releaseAngency: initData.releaseAngency, fileStatus: initData.fileStatus, industry: initData.industry, effectiveDate: initData.effectiveDate ? dayjs(new Date(initData.effectiveDate).toLocaleDateString('zh-CN')) : null, createDate: initData.createDate.substring(0, 10), createUser:initData.createUser, createUserName: initData.createUserName, updateUser: initData.updateUser, updateUserName: initData.updateUserName, updateStatusFlg: initData.updateStatusFlg, updateDate: initData.updateDate, abstraction: initData.abstraction, region: '1' }; form.setFieldsValue(data); setFormData(data); setSummary(initData.abstraction); setLawDataParam(initData.analysisInformationDto != undefined ? initData.analysisInformationDto : null) ; } catch (error) { handleError(error); } setIsLoading(false); }; loadLawDetail(); }, [lawRegulationId, form]); // 表单值变化时实时更新状态 const handleValuesChange = (changedValues: any, allValues: any) => { console.log('所有表单值', allValues); // 实时输出所有表单的值 }; const handleSubmit = async (values: any) => { Modal.confirm({ title: "确认提交", content: "请确认你的输入信息", okText: "确认", cancelText: "取消", onOk: () => { handleSubmitApi(values); } }); } const handleSubmitApi = async (values: any) => { setIsLoading(true); try { const allValues: LawEditItem = form.getFieldsValue(true); const submitValues = { ...allValues, releaseDate: dayjs(allValues.releaseDate).format('YYYY-MM-DD'), effectiveDate: dayjs(allValues.effectiveDate).format('YYYY-MM-DD'), updateDate: new Date().toISOString() } console.log("updatedLawInfo", submitValues); await updateLaw(submitValues); //跳转到一览画面 navigate('/law/lawList'); } catch (error) { handleError(error); } setIsLoading(false); };
最新发布
07-11
<think>根据提供的代码,问题在于没有正确获取update的值。具体来说,在提交表单时,`updateDate`被设置为当前时间,但代码中可能还有其他需要更新的字段没有正确处理。 在代码中,`handleSubmitApi`函数负责组装提交数据。这里有几个问题需要注意: 1. 在`submitValues`中,`releaseDate`和`effectiveDate`使用dayjs进行了格式化,但是`updateDate`直接使用了`new Date().toISOString()`,这会产生一个ISO格式的字符串(包含时间部分和时区信息)。然而,后端可能期望的是与`releaseDate`和`effectiveDate`相同的格式(即'YYYY-MM-DD')?或者可能是需要包含时间?这取决于后端接口的要求。 2. 另外,在更新时,通常还需要更新`updateUser`(当前操作用户)等信息。在代码中,表单初始数据包含了`updateUser`和`updateUserName`,但在提交没有更新这些字段。所以,在提交之前,应该将当前用户的信息设置到`updateUser`和`updateUserName`字段。 3. 在初始数据加载时,`updateDate`字段直接从接口返回的数据中取出,但没有在表单中显示(因为表单中没有对应的表单项),而在提交时,我们覆盖了`updateDate`为当前时间。这可能是正确的,因为每次更新都应该更新修改时间。但同样,需要确保当前用户信息也被更新。 4. 在`handleSubmitApi`中,我们使用`form.getFieldsValue(true)`获取所有表单字段的值(包括隐藏字段)。但是,在表单初始化时,我们设置了`updateDate`为初始值,而在提交时又覆盖为当前时间。这里需要注意,如果表单中没有`updateUser`和`updateDate`字段(即没有对应的表单项),那么`form.getFieldsValue(true)`可能不会包含这些字段,除非它们被设置为隐藏字段或者通过`setFieldsValue`设置了。 5. 观察初始数据加载时,我们设置表单的值包括`updateDate`,但提交时我们重新设置了`updateDate`为当前时间。这应该是合理的,因为每次更新操作都应该更新修改时间为当前时间。但是,如果后端要求其他字段(如更新人)也需要同时更新,那么我们也需要在提交前设置这些字段。 根据以上分析,我们需要做以下修改: - 在提交数据时,除了`updateDate`,还应该更新`updateUser`(当前用户的ID)和`updateUserName`(当前用户的名称)。这些信息可能来自登录用户的信息,但代码中没有体现。假设我们有一个全局状态存储当前用户信息,比如`currentUser`,包含`userId`和`userName`。 - 如果当前用户信息没有在组件中,我们需要获取。这里假设我们有一个`useAuth`钩子来获取当前用户,或者从其他地方注入。如果没有,可能需要根据实际情况调整。 - 另外,`updateDate`的格式问题:在初始数据中,`updateDate`是一个字符串,而在提交时我们将其设置为ISO字符串。但是,在初始数据加载时,我们没有将`updateDate`显示在表单中,也没有在表单中修改它。所以,我们只需要在提交时按照后端要求的格式提供即可。 由于代码中没有提供当前用户信息的获取方式,我将假设存在一个`currentUser`对象,其中包含`userId`和`userName`。如果没有,你需要根据实际情况获取。 修改`handleSubmitApi`如下: 1. 获取当前用户信息(假设从某个地方,例如localStorage、状态管理库等)。 2. 在组装提交数据时,设置`updateUser`为当前用户的ID,`updateUserName`为当前用户的名称,`updateDate`为当前时间(格式与`releaseDate`和`effectiveDate`保持一致?或者按照后端要求)。 注意:在初始数据中,`updateDate`是一个字符串,但我们在提交时使用`new Date().toISOString()`,这可能会与后端期望的格式不一致。根据代码中其他日期字段的处理,都是格式化为'YYYY-MM-DD',但`updateDate`可能要求更精确(包含时间)?这需要看后端接口的定义。 在代码中,初始数据加载时,`updateDate`没有进行格式化,而是直接赋值给了表单(注意:在表单中,我们没有使用`DatePicker`来显示`updateDate`,所以它只是一个字符串)。在提交时,我们将其覆盖为当前时间的ISO字符串。如果后端期望的是日期格式(不带时间)或者日期时间格式,那么需要保持一致。 观察`updateLaw`接口期望的数据类型。根据`LawEditItem`类型,`updateDate`应该是`string`类型,但具体格式需要与后端匹配。 为了安全起见,我们可以将`updateDate`也格式化为'YYYY-MM-DD',与`releaseDate`和`effectiveDate`相同。但注意,这样会丢失时间信息。如果后端需要精确到时间,那么应该使用包含时间的格式。 由于在初始数据中,`updateDate`是从后端返回的,我们可以查看返回的数据格式。例如,在初始数据加载时,打印`initData.updateDate`看看是什么格式。如果它是'YYYY-MM-DD'格式,那么我们在更新时也应该用相同的格式。如果它是包含时间的,那么我们也应该包含时间。 根据代码中的处理,`releaseDate`和`effectiveDate`被格式化为'YYYY-MM-DD',所以`updateDate`也采用同样的格式可能更一致。 修改`updateDate`的格式化: dayjs().format('YYYY-MM-DD') 但是,如果后端要求精确到毫秒,那么我们就需要提供ISO字符串。所以,具体取决于后端接口。 由于问题描述中没有明确,这里假设后端要求`updateDate`为ISO字符串(因为初始数据中`createDate`是精确到日的,而`updateDate`在初始数据中是一个完整的字符串,可能包含时间)。在代码中,初始数据`updateDate`没有进行截取,所以可能是完整的日期时间字符串。因此,使用`new Date().toISOString()`可能是正确的。 下面,我将按照以下假设修改代码: - `updateUser`和`updateUserName`需要设置为当前用户的信息。 - `updateDate`使用ISO字符串(与代码中原先的处理一致)。 修改后的`handleSubmitApi`函数: 注意:由于代码中没有当前用户信息,我将用假数据代替。你需要替换为实际的当前用户信息获取方式。 ```typescript const handleSubmitApi = async (values: any) => { setIsLoading(true); try { const allValues: LawEditItem = form.getFieldsValue(true); // 假设从某个地方获取当前用户信息,这里用假数据代替 const currentUser = { userId: 'current_user_id', userName: 'Current User' }; // 或者从localStorage中获取,例如: // const currentUser = JSON.parse(localStorage.getItem('currentUser')); const submitValues = { ...allValues, releaseDate: dayjs(allValues.releaseDate).format('YYYY-MM-DD'), effectiveDate: dayjs(allValues.effectiveDate).format('YYYY-MM-DD'), updateDate: new Date().toISOString(), // 使用ISO字符串 updateUser: currentUser.userId, // 设置更新人ID updateUserName: currentUser.userName // 设置更新人姓名 }; console.log("updatedLawInfo", submitValues); await updateLaw(submitValues); //跳转到一览画面 navigate('/law/lawList'); } catch (error) { handleError(error); } setIsLoading(false); }; ``` 另外,在初始数据加载时,我们设置了`updateDate`到表单中,但由于在提交时我们会覆盖,所以没有问题。而且,在表单中,用户不应该修改`updateDate`、`updateUser`等字段,所以这些字段不应该出现在表单中(或者以只读方式显示)。在代码中,这些字段没有对应的表单项,所以`form.getFieldsValue(true)`不会包含它们,除非我们通过`setFieldsValue`设置了。因此,在提交数据时,我们手动添加这些字段是安全的。 但是,在初始数据加载时,我们设置了整个表单的值,包括`updateUser`和`updateDate`,但提交时我们覆盖了它们。所以,初始值在提交时被覆盖,这是符合预期的。 最后,关于`updateUser`和`updateUserName`,在初始数据加载时,我们设置了这两个字段的值(从接口返回的数据),但在提交时,我们使用当前用户信息覆盖。这也是正确的,因为更新操作应该更新为当前操作用户。 因此,修改点主要是: 1. 在提交数据中加入`updateUser`和`updateUserName`(当前用户信息)。 2. 确保`updateDate`的格式符合后端要求(这里保持原来的ISO字符串,如果后端要求其他格式,则调整)。 如果当前用户信息无法在组件内获取,你需要先实现用户信息的获取逻辑。 另外,注意在表单中,我们没有显示`updateUser`和`updateDate`,所以用户无法修改。但提交时我们手动添加,这样后端就能接收到正确的更新信息。 如果还有问题,请检查`updateLaw`接口期望的数据结构,确保字段名称和格式正确。 由于代码不完整,以上修改是基于假设。请根据实际项目情况调整。 修改后的代码部分: 注意:替换获取当前用户信息的方式。 如果项目中已经存储了当前用户信息,例如在Redux、Context、LocalStorage中,请使用相应的方法获取。 如果还没有,可能需要从登录信息中获取传递过来。 下面,我将修改后的`handleSubmitApi`代码放在上下文中: ```typescript const handleSubmitApi = async (values: any) => { setIsLoading(true); try { const allValues: LawEditItem = form.getFieldsValue(true); // 获取当前用户信息 - 示例(根据实际情况调整) // 假设从localStorage中获取当前用户 const currentUserString = localStorage.getItem('currentUser'); let currentUser: { userId: string; userName: string } = { userId: '', userName: '' }; if (currentUserString) { currentUser = JSON.parse(currentUserString); } else { // 如果没有,可能需要跳转到登录页,这里只是示例 message.error('用户信息不存在,请重新登录'); navigate('/login'); return; } const submitValues = { ...allValues, releaseDate: dayjs(allValues.releaseDate).format('YYYY-MM-DD'), effectiveDate: dayjs(allValues.effectiveDate).format('YYYY-MM-DD'), updateDate: new Date().toISOString(), // 使用ISO字符串 updateUser: currentUser.userId, // 设置更新人ID updateUserName: currentUser.userName // 设置更新人姓名 }; console.log("updatedLawInfo", submitValues); await updateLaw(submitValues); //跳转到一览画面 navigate('/law/lawList'); } catch (error) { handleError(error); } setIsLoading(false); }; ``` 请根据实际情况调整获取当前用户信息的代码。 另外,注意在初始数据加载时,我们设置了`updateUser`和`updateUserName`,但提交时覆盖了,所以没问题。 如果还有其他字段需要更新,请一处理。 最后,如果后端要求`updateDate`的格式不是ISO字符串,请修改格式化方式。例如,如果要求是'YYYY-MM-DD HH:mm:ss',可以使用`dayjs().format('YYYY-MM-DD HH:mm:ss')`。 根据问题描述,修改的主要目的是正确获取update的值(包括更新人、更新时间)。以上修改应该能够解决。 如果问题仍然存在,请检查网络请求,查看提交数据是否符合后端接口要求。 由于没有后端接口的具体信息,以上修改是基于常见情况的假设。 现在,根据以上分析修改代码。</think>根据您提供的代码,问题在于提交表单时`updateDate`字段没有正确获取值。主要问题出现在`handleSubmitApi`函数中,您直接使用了`new Date().toISOString()`来设置`updateDate`,但应该使用表单中已存在的`updateDate`值。以下是修改方案: ### 问题分析: 1. 在`handleSubmitApi`中,您直接覆盖了表单中的`updateDate`值 2. 应该保留表单中已有的`updateDate`值,只更新必要的字段 3. 日期格式处理需要统一(后端可能期望特定格式) ### 修改后的代码: ```typescript const handleSubmitApi = async (values: any) => { setIsLoading(true); try { const allValues: LawEditItem = form.getFieldsValue(true); // 修改点1:保留原有的updateDate值 const submitValues = { ...allValues, releaseDate: dayjs(allValues.releaseDate).format('YYYY-MM-DD'), effectiveDate: dayjs(allValues.effectiveDate).format('YYYY-MM-DD'), // 不要覆盖updateDate,使用表单中的值 }; console.log("updatedLawInfo", submitValues); await updateLaw(submitValues); navigate('/law/lawList'); } catch (error) { handleError(error); } setIsLoading(false); }; ``` ### 优化建议: 1. **日期格式统一处理**: ```typescript // 创建日期格式化工具函数 const formatDate = (date: any) => date ? dayjs(date).format('YYYY-MM-DD') : null; // 在submitValues中使用: releaseDate: formatDate(allValues.releaseDate), effectiveDate: formatDate(allValues.effectiveDate), ``` 2. **确保updateDate正确传递**: 在初始数据加载时,确保`updateDate`已正确设置到表单中: ```typescript useEffect(() => { const loadLawDetail = async () => { // ...省略其他代码 const data = { // ...其他字段 updateDate: initData.updateDate, // 确保包含此字段 }; form.setFieldsValue(data); // ...省略其他代码 }; loadLawDetail(); }, [lawRegulationId, form]); ``` 3. **添加类型校验**: ```typescript interface SubmitValues extends LawEditItem { releaseDate: string; effectiveDate: string; updateDate: string; // 明确类型 } ``` ### 完整修改后的`handleSubmitApi`: ```typescript const handleSubmitApi = async () => { setIsLoading(true); try { const allValues = form.getFieldsValue(true) as LawEditItem; const formatDate = (date: any) => date ? dayjs(date).format('YYYY-MM-DD') : null; const submitValues: SubmitValues = { ...allValues, releaseDate: formatDate(allValues.releaseDate), effectiveDate: formatDate(allValues.effectiveDate), // updateDate 保持原值 }; console.log("提交数据:", submitValues); await updateLaw(submitValues); message.success("更新成功"); navigate('/law/lawList'); } catch (error) { handleError(error); } finally { setIsLoading(false); } }; ``` ### 解释说明: 1. **保留`updateDate`**:不再覆盖表单中的`updateDate`值,直接使用从后端获取设置到表单中的值 2. **日期格式化**:使用`dayjs`统一处理日期格式,确保与后端期望格式一致 3. **类型安全**:通过`SubmitValues`接口明确提交数据的类型结构 4. **错误处理**:使用`finally`确保无论成功失败都关闭loading状态 如果后端要求`updateDate`必须是更新时的当前时间,那么应该这样修改: ```typescript const submitValues = { ...allValues, releaseDate: formatDate(allValues.releaseDate), effectiveDate: formatDate(allValues.effectiveDate), updateDate: new Date().toISOString(), // 使用当前时间 }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值