js代码生成form,解决mvc的url参数过长问题

在MVC项目中，通常下载的文件的简单方式是直接采用 location.href+查询参数方式。

 var searchParams = {

                     studentName: $("#StudentName").val(),

                     birthDate: $("#BirthDate").val()

                 };

  var baseurl = "@Url.Action("ExportData", "Student")";

 location.href = baseurl + "?" + $.param(searchParams);

但是对于查询参数过长时url就会出错，因为IE浏览器对URL的最大限制为2083个字符，如果超过这个数字，提交按钮没有任何反应。对于Firefox浏览器URL的长度限制为65,536个字符，但当我测试时，最大只能处理8182个字符，这是因为url的长度除了浏览器限制外，还会受Web服务器的限制。注：可能有些朋友会想当然的认为，如果最大长度限制为2038字符，是不是参数差不多可以传递1000个左右的汉字。这样认为其实是不对的，对于中文的传递，最终会为urlencode后的编码形式进行传递，如果浏览器的编码为UTF8的话，一个汉字最终编码后的字符长度为9个字符。（此段话引用URL最大长度问题,非常感谢）

所有楼主改用form提交，由于系统有多个页面存在导出文件功能，并且一个页面也存在导出存在多个Excel的情况，故写了个插件，有啥意见和建议欢迎批评改正。

原始的方式：提前在界面先定义好form，当用户点击时提及。

//原生写法

<form method="POST" action="@Url.Action("ExportData", "Student")" id="exportForm">

    <input type="hidden" id="studentName" name="studentName" />

    <input type="hidden" id="birthDate" name="birthDate" />

</form>

 //MVC封装好的方法

@Html.BeginForm("ExportData", "Student", FormMethod.Post, new { id = "exportForm" }) {

    <input type="hidden" id="stationCodes" name="stationCodes" />

        <input type="hidden" id="studentName" name="studentName" />

        <input type="hidden" id="birthDate" name="birthDate" />

        }

封装好的插件： var

 /* 导出excel

 11.13.2014 - LQZ - 全选站点url过长ie超过2083个字符将报错,将所有url整合成form提交

 */

 ;(function() {

     var instance;

     window.GridExportOperate = function () {

         if (instance) {

             return instance;

         }

         instance = this;

         this.gridexport = function(formPara, formId, formUrl) {

             if (!$("#" + formId).length) {

                 var form = document.createElement("form");

                 form.type = "post";

                 //form.style.display = "none";

                 document.body.appendChild(form);

                 form.action = formUrl;

                 for (item in formPara)

                     createInput(form, "hidden", item, formPara[item]);

                 form.submit();

             } else {

                 for (item in formPara)

                     changeInput(item, formPara[item]);

                 $("#" + formId).submit();

             }

         };

         function createInput(form, type, name, value) {

             var tmpInput = document.createElement("input");

             tmpInput.type = type;

             tmpInput.name = name;

             tmpInput.value = value;

             form.appendChild(tmpInput);

         }

         function changeInput(name, value) {

             $('#' + name).val(value);

         }

     };

 })(jQuery);

调用方法创建类的实例后调用。

  var gridxportOperate = new GridExportOperate();

gridxportOperate.gridexport(formPara, formId, baseurl);

巴特西

js代码生成form,解决mvc的url参数过长问题

最新文章

热门文章