解决iframe参数过长无法加载问题小记

解决iframe参数过长无法加载问题小记项目中用到了iframe,传参的时候使用的src属性,默认采用的get方式,此种方式在参数较长的时候就会报错(404无法找到资源),为了解决这种情况,改为采用post方式提交。解决方法:结合form表单,利用表单的post请求方式达到目的。实现方式 增加一个form表单的标签,method设置为post,target设置一个标识,假如target=”target1” 在iframe设置na…

大家好,又见面了,我是你们的朋友全栈君。

项目中用到了iframe,传参的时候使用的src属性,默认采用的get方式,此种方式在参数较长的时候就会报错(404无法找到资源),为了解决这种情况,改为采用post方式提交。解决方法:结合form表单,利用表单的post请求方式达到目的。

实现方式 
增加一个form表单的标签,method设置为post,target设置一个标识,假如target=”target1” 
在iframe设置name属性,name需要与target一致 name = “target1”

发送请求时通过发送form submit请求来使用post方式
以下代码用于定义iframe和相关form表单。

<form id="form1" action="" target="target1" method="post">
        <input name="Year" type="hidden" value="" />
        <input name="CommentUnitCode" type="hidden" value="" />
        <input name="CommentUnitType" type="hidden" value="" />
        <input name="dataType" type="hidden" value="" />
</form>
<iframe id="iframe1" name="target1"  src="" frameborder="0"></iframe>

以下代码用于定义form表单的提交对应的action方法和参数,这样就以post方式将参数传至后台,不必再担心参数过长的问题。 

var frame1 = document.getElementById('iframe1');
var url1 = "/DataDisplay/ShowRangeDataPage";
$('#form1 input[name=Year]').val(year);
$('#form1 input[name=CommentUnitCode]').val(CommentUnitCode);
$('#form1 input[name=CommentUnitType]').val(CommentUnitType);
$('#form1 input[name=dataType]').val(dataparams.dataType);
$('#form1').attr('action', url1);
$('#form1').submit();

表单提交后,在后台获取并保存参数值。

[HttpPost]
public ActionResult ShowRangeDataPage(ReportDataListRequest request)
{
	ViewBag.Year = request.Year;
	ViewBag.CommentElementValue = request.CommentElementValue;
	ViewBag.CommentUnitValue = request.CommentUnitValue;
	ViewBag.CommentUnitCode = request.CommentUnitCode;
	ViewBag.CommentUnitType = request.CommentUnitType;
	ViewBag.dataType = request.dataType;
	return View();
}     

前端ShowRangeDataPage页面调用post传的参数。

$.ajax({
		url: postUrl,
		type: 'post',
		dataType: 'json',
		data: {
			Year: Year,
			CommentUnitCode: '@ViewBag.CommentUnitCode',
			CommentUnitType: '@ViewBag.CommentUnitType',
			dataType: '@ViewBag.dataType'
		},
		success: function (result) {
			var data = eval(result.PieDataList);  
			data.sort(function (a, b) {
				return b.value - a.value;
			});
			clickProvice(data);
		},
		error:function (message) {
			console.log(message);
		}
});        

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157969.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号