动态组装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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值