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

最新推荐文章于 2025-02-21 15:08:25 发布

原创最新推荐文章于 2025-02-21 15:08:25 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #jquery #json #javascript #mvc

ASP.NET MVC 同时被 2 个专栏收录

13 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

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

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>