解析：使用easyui的form提交表单，在IE下出现类似附件下载时提示是否保存的现象

最新推荐文章于 2021-06-22 01:35:02 发布

足球带我奔跑

最新推荐文章于 2021-06-22 01:35:02 发布

阅读量544

点赞数

分类专栏： springboot

springboot 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

解析：使用easyui的form提交表单，在IE下出现类似附件下载时提示是否保存的现象

之前开发时遇到的一个问题，使用easyui的form提交表单，在Chrome下时没问题的，但是在IE下出现类似附件下载时提示是否保存的现象。

这里记录一下如何解决的。其实这个现象不光是easyui的form，还有其他一些form插件也是一样的，使用不当就会遇到这个问题。

前台：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="keywords" content="">

<meta name="description" content="">

<title></title>

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

</head>

<body>

<div>

<form id="formTest" method="post" action="~/Test/Save">

name: <input type="text" /><br />

<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">submit</a>

</form>

</div>

<script type="text/javascript">

function submitForm() {

$('#formTest').form('submit', {

success: function(data){

var data = $.parseJSON(data);

if (data.result){

alert(data.msg)

}

});

}

</script>

</body>

</html>

后台：

public ActionResult Save()

{

return Json(new {

result = true,

msg = "Save successful."

});

}

结果：

Chrome是这样↓

IE是这样↓，不科学啊？

怎么解决？改后台的Action的返回的content-type改为text/html：

public ActionResult Save()

{

return Json(new {

result = true,

msg = "Save successful."

}, "text/html");

}

为什么？因为JsonReslut默认返回给浏览器的content-type类型是：application/json，（←等于没说）。

奇怪了，我们平时通过jQuery的ajax方法来提交数据、请求数据不都挺正常的吗，没出现过这个情况啊，浏览器兼容性jQuery已经帮我们处理好了啊，这个easyui的form方法也是无刷新提交表单啊，应该也是ajax吧。问题就在这里，这个easyui的form提交表单并不是真的ajax。我们来看看easyui-form的源码（正好1.4.2版本的jquery.form.js有源码）：

复制代码

...省略...
         function ajaxSubmit(target, options){
        var opts = $.data(target, 'form').options;
        $.extend(opts, options||{});
        
        var param = $.extend({}, opts.queryParams);
        if (opts.onSubmit.call(target, param) == false){return;}
        $(target).find('.textbox-text:focus').blur();
        //构造了一个iframe
        var frameId = 'easyui_frame_' + (new Date().getTime());
        var frame = $('<iframe id='+frameId+' name='+frameId+'></iframe>').appendTo('body')
        frame.attr('src', window.ActiveXObject ? 'javascript:false' : 'about:blank');
        frame.css({
            position:'absolute',
            top:-1000,//让我们看不到它
            left:-1000
        });
        frame.bind('load', cb);
        
        submit(param);
        
        function submit(param){
            var form = $(target);
            if (opts.url){
                form.attr('action', opts.url);
            }
            var t = form.attr('target'), a = form.attr('action');
            form.attr('target', frameId);//把我们要提交的form的target指向构造出来的那个iframe
            var paramFields = $();
            try {
                for(var n in param){
                    var field = $('<input type="hidden" name="' + n + '">').val(param[n]).appendTo(form);
                    paramFields = paramFields.add(field);
                }
                checkState();
                form[0].submit();
            } finally {
                form.attr('action', a);
                t ? form.attr('target', t) : form.removeAttr('target');
                paramFields.remove();
            }
         ...省略...

复制代码

看我标为下划线的，其他的我现在不关心，就先省略了。

我们看到easyui的作者写了一个ajaxSubmit方法（不仔细看内容还真以为是一个ajax方法呢）。方法里面动态构造了一个隐藏的iframe，然后把我们要提交的form的target指向了构造出来的这个隐藏的iframe，给这个iframe设置了load事件回调方法用来处理响应。重要的是那句“form[0].submit()”，这是什么，这就是直接在提交表单啊，哪儿有什么ajax，只是保证了页面无刷新。（好吧，我承认我理解的ajax概念比较狭隘）

IE浏览器对于application/json的非ajax的响应的处理比较特殊，我这里指的是相当于你在IE的地址栏上输入了一个url，而服务器返回的content-type是application/json，我猜是IE默认是不能直接处理application/json的响应，所以就提示下载了。

而Chrome则默认对application/json是当做文本来处理的，所以可以正常显示。

还有一点需要弄清楚的是ajax，我们看看这个（来自w3school）：

我们看出ajax的响应实际上就两种，一种当做纯文本处理，另一种当做xml处理。所以jQuery的ajax默认对于application/json或者text/html都会当做文本处理的，ajax是没有一种处理方式是“下载保存”的方式的。

这样应该比较好理解这个问题了。

可以比较一下用真的ajax来提交表单，不管后台返回的是application/json或者text/html处理都是一致的：

复制代码

        function submitForm() {
            $.post($("#formTest").attr("action"), {
                name: $("#formTest input[type=text]").val()
            }, function (response) {
                alert(response.msg);
            });
        }

复制代码

【SpringMVC】【EasyUI】关于使用EasyUIForm上传文件，返回JsonIE提示下载文件的解决办法！

EasyUI+SpringMVC+MyBatis

因为按正常手段，无法使用Ajax来提交一个包含文件的表单，故想到利用EasyUI的Form来提交，EasyUI的form封装了一套伪Ajax提交的方法，所以能够起到以ajax提交文件表单的作用！

但是当文件提交成功后，后台往前台返回了一个Json用来提示上传成功！

但是在其他浏览器下都正常，但是唯独在IE中会提示用户下载这个Json文件！

仔细的查看了下EasyUI的API看到API里有这样的一段话：

也就是说，返回的数据要无需设置返回值的相应类型，而是直接返回Json格式的文本即可！

所以，我在相应的Action中设置了一下Responsed的相应类型

response.setContentType("text/html;charset=UTF-8")

但是问题依旧，然后我打开MyEclipse里有一个TCPIP端口监听工具，查看了一下，相应的格式为空

也就是说设置的相应类型并没有起作用，

这时我想起来，在配置文件中配置了Json转换器

这里面设置了相应类型为Json，也就是说最终响应的类型依旧是Json类型，既然如此

在允许相应列表里加了一条

然后在前台需要将返回的文本格式化为Json对象，有两种方式

1，var obj="("+data+")";

2,var obj=$.parseJSON(data);

然后再测试完美通过，不会再提示下载文件了！

问题总结

1.IE浏览器默认是不能直接处理application/json的响应，所以就提示下载了。

2.easyui的form提交表单并不是真的ajax。而是构造了一个隐藏的ifram,给这个iframe设置了load事件回调方法用来处理响应。

因此在ie下提交easyui from时就会出现下载问题,而其他浏览器application/json把数据当作文本处理所有不会出现此问题

解决方案:

spring mvc 解决方案1. 在HttpMessageConvert中配置supportedMediaTypes属相的值为text/html, jQuery的ajax默认对于application/json或者text/html都会当做文本处理的，ajax是没有一种处理方式是“下载保存”的方式的。(不建议使用)

2.在controler中按一下方式使用方法,返回String 时,controler返回的时文本类型,而不是application/json

@RequestMapping("/add")  //produces={MediaType.TEXT_HTML_VALUE}
@ResponseBody
public String add(RoleVo roleVo, HttpServletResponse response) {
   //response.setHeader("Content-Type" ,MediaType.TEXT_HTML_VALUE);
   roleService.add(roleVo);
   //return Result.of(true,"添加成功！");
   return JSON.toJSONString(Result.of(true,"添加成功！"));

3.2018/12/31查看eayui文档时突然发现:一下信息,将iframe=false 直接使用ajax提交请求,避免了Ie提交不能识别application/json返回类型的问题(ajax来提交表单，不管后台返回的是application/json或者text/html处理都是一致的)

iframe

boolean

Defines if to submit a form using iframe mode. True to submit the form inside a iframe. False to send the form with ajax. Available since version 1.4.5.

true