All geek questions in one place

Why ajaxSubmit doesn't send the correct ajax request with the request header X-Requested-With = XMLHttpRequest

I have a lot of googled but I have not found any solution

I use jQueryUI Dialog and ajaxSubmit to send data (files and others) through a modal dialog and Ajax.

My problem is very simple: data is sent correctly to the server, but not through ajax, i.e. no request header attributeX-Requested-With=XMLHttpRequest

So what am I doing wrong or is there some kind of known issue?

Here is a snippet of my code.

$('#photo-dlg').dialog({
  modal: true,
  open: function() { $(this).load("/mywebsite/mydialog");} 
  //importing <form id="formid" method="post" name="updatePhoto" enctype="multipart/form-data"> ...
  buttons: { 
    'cancel' : function() {$(this).dialog('close');}, 
    'submit' : function() { 
               $('#formid').ajaxSubmit({
                   dataType: "json", 
                   success: function (data) { $('#photo-dlg').dialog('close'); })  
               });}
  });

By the way, I tried options like:

headers: {"X-Requested-With":"XMLHttpRequest"} //OR
data: {"X-Requested-With":"XMLHttpRequest"} //OR
beforeSend: function(xhrObj) {xhrObj.setRequestHeader("X-Requested-With", "XMLHttpRequest")}

without success

UPDATE:
You can copy / paste the following code into the html page and try it yourself through FireBug (=> No X-Requested-With header)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://d23fbyuk1dcxop.cloudfront.net/js/jquery/jquery.multiselect-1.8.min.gz.js"></script>
    <script type="text/javascript" src="http://d23fbyuk1dcxop.cloudfront.net/js/jquery/jquery.form.min.gz.js"></script>
</head>
<body>
<div id="photo-dlg2">
    <form id="updatePhoto2" enctype="multipart/form-data" elementid="updatePhoto2" name="updatePhoto2" method="POST"
          action="http://mywebsite.com/article/updatePhoto">
        <input type="file" size="50" class="easyinput" id="photoFile" name="photoFile">
    </form>
</div>
<script type="text/javascript">
    $('#photo-dlg2').dialog({
        modal: true,
        buttons: { 'submit' : function() {
            $('#updatePhoto2').ajaxSubmit({
                dataType: "json",
                success: function (data) {
                    alert(data['status']);
                }
            });
        }}
    });
</script>
</body>
</html>
+3
5

, , : !

, jquery form XMLHttpRequest ,

- , , , <input type="file" name="photoFile"> , X-Requested-With = XMLHttpRequest , Ajax.

.

+3

. , : -)

. XMLHttpRequest, . , , , .

, , ajax. , ... javascript . IE6 , ';' ( "" - , - ";" ) , ... , , , , IE6 , , (, , , Dichotomy ).

( ? ...), , , , . jQuery ( , ajax ). , IE6: -)

+4

-.

, , . IE 7, 8 9 (...), ajaxform ( , ajaxsubmit), .

IE does not send a header X-Requested-With=XMLHttpRequest. Chrome sends this header as well as Firefox.

+2
source

You must remember the commas when defining objects in Javascript. Your code is missing.

$('#photo-dlg').dialog({
  modal: true,
  open: function() { $(this).load("/mywebsite/mydialog");}, // you had a missing comma here.
  //importing <form id="formid" method="post" name="updatePhoto" enctype="multipart/form-data"> ...
  buttons: { 
    'cancel' : function() {$(this).dialog('close');}, 
    'submit' : function() { 
               $('#formid').ajaxSubmit({
                   dataType: "json", 
                   success: function (data) { $('#photo-dlg').dialog('close'); })  
               });}
  });

But this cannot be the cause of your problems.

0
source

IE 10 left my HTTP header (X-Requested-With = XMLHttpRequest) when I accidentally put 2 forms with the same id on the page.

I know this is out of date, but 5 results appeared on Google search results when I searched for this problem.

0
source

Source: https://habr.com/ru/post/1784167/

More articles:


All Articles