Parsing: Using Easyui form to submit a form, under IE, there are similar attachments downloaded when prompted to save the phenomenon

Original: Parse: Use Easyui form to submit a form, under IE, appear similar to download the attachment when prompted to save the phenomenon

Prior to the development of a problem encountered, using Easyui form submission form, under Chrome is not a problem, but in IE, there are similar attachments downloaded when prompted to save the phenomenon.

Here's a note on how to fix it. In fact, this phenomenon is not only easyui form, there are some other form plug-ins are the same, the use of improper will encounter this problem.

Front desk:

<! DOCTYPE html>
Background:
        Public ActionResult Save ()         {            return Json (new {                 result = true,                msg = "Save successful."            });        
Results:
Chrome is like this ↓
IE is so ↓, unscientific ah?
How to solve? Change the back of the action to Content-type to text/html:
        Public ActionResult Save ()         {            return Json (new {                 result = true,                msg = "Save successful."            }, "text/ HTML ");        }
Why? Because the Content-type type that Jsonreslut returns to the browser by default is: Application/json, (← equals not said).
Strange, we usually through the Ajax method of jquery to submit data, request data is not quite normal, did not appear this situation ah, browser compatibility jquery has helped us to deal with Ah, this Easyui form method is also no refresh submission form Ah, should also be Ajax it. Here's the problem, and this Easyui form submission form is not really ajax. Let's take a look at the source code of Easyui-form (exactly 1.4.2 version of Jquery.form.js has source code):
... Omit ...functionajaxsubmit (target, options) {varopts = $.data (target, ' form '). Options; $.extend (opts, Options||{}); varparam =$.extend ({}, opts.queryparams); if(Opts.onSubmit.call (target, param) = =false){return;} $ (target). Find ('. Textbox-text:focus '). blur (); //Constructs an IFRAME        varFrameid = ' easyui_frame_ ' + (NewDate (). GetTime ()); varframe = $ (' <iframe id= ' +frameid+ ' name= ' +frameid+ ' ></iframe> '). AppendTo (' body ') frame.attr (' src ', window. ActiveXObject? ' Javascript:false ': ' About:blank '); Frame.css ({position: ' absolute ', top:-1000,//let us not see it left:-1000}); Frame.bind (' Load ' , CB);                Submit (param); functionSubmit (param) {varform =$ (target); if(Opts.url) {form.attr (' Action ', Opts.url); }            var t = form.attr (' target '), a = form.attr (' action '); Form.attr (' target ', frameid);//The target of the form we are submitting is pointing to the iframe that was constructed.            varParamfields = $(); Try {                 for(varNinchparam) {                    varfield = $ (' <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 (); }         ... Omit ...
Look at me marked red, the other I do not care now, first omitted.
We see the author of Easyui writing a Ajaxsubmit method (which is really an Ajax method without looking closely at the content). The method dynamically constructs a hidden iframe and then points the target of the form that we want to submit to the hidden IFrame that was constructed, and sets the Load event callback method for the IFRAME to handle the response. The important thing is that the phrase "form[0].submit ()", which is what, this is directly in the submission form Ah, where there is any Ajax, just to ensure that the page does not refresh. (Well, I admit I understand that the AJAX concept is rather narrow)
IE browser for Application/json of non-Ajax response is very special, I mean here is equivalent to you in the address bar of IE entered a URL, and the server returned Content-type is Application/json, I guess the IE default is not directly processing Application/json response, so prompted to download.
Chrome, by default, handles Application/json as text, so it's normal to display.
One more thing to figure out is Ajax, let's take a look at this (from W3school):
We see that the AJAX response is actually two, one as plain text processing and the other as XML processing. So jquery Ajax by default for Application/json or text/html will be treated as text, Ajax is not a way to handle the "download Save" way.
This should be a better understanding of the problem.
You can compare the use of real Ajax to submit the form, regardless of whether the background returns Application/json or text/html processing is consistent:
        function SubmitForm () {            $.post ($ ("#formTest"). attr ("action"), {                name: $ ("#formTest input[type= Text]). Val ()            function  (response) {                alert (response.msg);            });        
Parsing: Using Easyui form to submit a form, under IE, there are similar attachments downloaded when prompted to save the phenomenon