之前开发时遇到的一个问题，使用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的源码

...省略...

         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);

            });

        }

所以修改返回类型  text/html 备忘

使用easyui的form提交表单，在IE下出现类似附件下载时提示是否保存的现象的更多相关文章

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

    之前开发时遇到的一个问题,使用easyui的form提交表单,在Chrome下时没问题的,但是在IE下出现类似附件下载时提示是否保存的现象. 这里记录一下如何解决的.其实这个现象不光是easyui的f ...

  2. Form提交表单页面不跳转

    1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  3. 回车禁止form提交表单

    今天遇到回车自动提交表单特此记录下 document.getElementsByTagName('form')[0].onkeydown = function(e) { var e = e || ev ...

  4. 利用ajaxSubmit()方法实现Form提交表单后回调

    1.      背景 最近在工作中,需要实现网页端图片上传到FTP服务器的功能.上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是 ...

  5. JS提交表单页面不跳转、JS下载、动态创建from

    JS下载 function downloadFile(id) {     var url =  "<%=request.getContextPath()%>/cer/downlo ...

  6. Form提交表单后页面刷新不跳转的实现

    <form action="" id="" method="post" target="nm_iframe"> ...

  7. form提交表单没接收到$_POST

    分享一个最近做项目遇到的奇葩经历: 很奇怪的,我在弄一个表单提交的时候,后台验证就报了非post提交错误 我就郁闷了,我form明明写的method为post,不可能是非post错误啊 经历反应测试, ...

  8. 表单提交学习笔记（一）—利用jquery.form提交表单（后台.net MVC）

    起因:一开始想用MVC本身的Form提交方法,但是提交完之后想进行一些提示,MVC就稍显不足了,最后用jquery插件---jquery.form.js,完美解决了问题~~ 使用方法 一.下载jque ...

  9. 【JavaScript】Html form 提交表单方式

    源:http://blog.csdn.net/wang02011/article/details/6299517 1.input[type='submit'] 2.input[type='image' ...

随机推荐

  1. 将场景导出XML或JSON或二进制而且解析还原场景

    导出unity场景的全部游戏对象信息,一种是XML一种是JSON. 本篇文章我们把游戏场景中游戏对象的.旋转.缩放.平移与Prefab的名称导出在XML与JSON中.然后解析刚刚导出的XML或JSON ...

  2. o.a.catalina.core.AprLifecycleListener : An incompatible version [1.2.7] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]

    1.错误信息提示: 2019-04-16 22:02:05.811 ERROR 18112 --- [           main] o.a.catalina.core.AprLifecycleLi ...

  3. iOS学习笔记(四)——iOS应用程序生命周期

    开发应用程序都要了解其生命周期,开始接触android时也是从应用程序生命周期开始的,android的应用程序生命周期更多是其组件的生命周期,例如Activity.Service.今天我们接触一下iO ...

  4. 1624 取余最长路(set)

    1624 取余最长路 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 佳佳有一个n*m的带权矩阵,她想从(1,1)出发走到(n,m)且只能往右往下移动,她能得到的娱 ...

  5. Python菜鸟之路：DOM基础

    前言 DOM 是 Document Object Model(文档对象模型)的缩写,定义了访问和操作 HTML 文档的标准方法.DOM把网页和脚本以及其他的编程语言联系了起来.DOM属于浏览器,而不是 ...

  6. ubuntu（已经配置了python2+opencv）简易配置python3的opencv:

    所达到的效果就是python2与python3都能使用opencv参考:http://blog.csdn.net/jiandanjinxin/article/details/71438780https ...

  7. python基础：while循环，for循环

    ---恢复内容开始--- 1.使用while循环输出1 2 3 4 5 6     8 9 10 2.求1-100的所有数的和 3.输出 1-100 内的所有奇数 4.输出 1-100 内的所有偶数 ...

  8. python爬虫--爬取cctv连续剧

    #encoding=utf-8 import requests from bs4 import BeautifulSoup import re import os from aria2rpc impo ...

  9. javaweb action无法跳转、表单无法跳转的解决方法

    action无法跳转,表单无法跳转的解决方法 刚在网上搜索了一下,发现我的这篇文章已被非常多人转载了去其他站点.暗爽,只是还是希望大家注明出处. 顺便说明一下.下面是在struts2中通过測试的 ac ...

  10. 0201-开始使用Spring Cloud实战微服务准备工作

    1.Spring Cloud是什么 基于spring boot,之上快速构建分布式系统的工具集 服务注册和发现[eureka.Consul.Zookeeper].服务负载均衡[Ribbon,feign ...