[英]Why ajaxSubmit does not send a correct ajax request with X-Requested-With=XMLHttpRequest request header
[英]XMLHttpRequest not adding header - “X-Requested-With: XMLHttpRequest”
我有一個ajax調用,我使用jQuery.ajax()向mvc操作發出請求。 這一切都很好。 但是由於某些表單具有文件控制,我將其從使用jQuery.ajax()更改為使用XMLHttpRequest使用HTML5 File API發送它。
由於進行此更改,MVC操作方法不再將其視為ajax請求。 使用Fiddler2我注意到它不再在請求中添加“X-Requested-With:XMLHttpRequest”,我認為這是問題所在。
我試圖發送的表單中沒有文件輸入,只有普通的文本框等,但我試圖保持方法通用處理兩者。 以下是我用來發送ajax請求的代碼:
// get the edit tender form
var $Form = $Button.closest('form');
var Url = $Form.attr('action');
var AjaxRequestObject = new XMLHttpRequest();
var FormDataToSend = new FormData();
$Form.find(':input').each(function () {
if ($(this).is('input[type="file"]')) {
var files = $(this)[0].files;
if (files.length > 0) {
FormDataToSend.append(this.name, files[0]);
}
} else {
FormDataToSend.append(this.name, $(this).val());
}
});
AjaxRequestObject.open('POST', Url, true);
AjaxRequestObject.onreadystatechange = function () {
if (AjaxRequestObject.readyState == 4) {
// handle response.
if (AjaxRequestObject.status == 200) {
if (!AjaxErrorExists(AjaxRequestObject.responseText, )) {
alert("success");
console.log(AjaxRequestObject.responseText);
}
else {
alert('failure');
}
}
else {
alert('failure');
}
}
};
AjaxRequestObject.send(FormDataToSend);
此代碼是在我遇到Darin Dimitrov提供解決方案的問題后提供的,因此我可以通過ajax發送文件輸入。
有什么想法為什么這個請求不會發送ajax調用的標頭?
X-Requested-With
由jQuery自動添加。 您可以使用AjaxRequestObject.setRequestHeader()
輕松添加它。 文件
我在檢測我的請求是否是ajax
時遇到了麻煩。 所以,也許這個樣本可以節省一兩分鍾的時間:
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', URL, true); // `true` for async call, `false` for sync.
// The header must be after `.open()`, but before `.send()`
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlhttp.onreadystatechange = function() {
// 4th state is the last:
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { ... }
};
xmlhttp.send();
用Flask
測試。
您可以本機覆蓋所有XMLHttpRequest.open方法調用,並在其中添加X-Requested-With標頭,如:
(function () {
// @author https://github.com/stopsopa jfdsa78y453cq5hjfd7s877834h4h3
if (window.XMLHttpRequest.prototype.onOpen) {
return console.log('XMLHttpRequest.onOpen is already defined');
}
function over(method, on, off) {
var old = window.XMLHttpRequest.prototype[method];
if (!old.old) {
var stack = [];
window.XMLHttpRequest.prototype[on] = function (fn) {
if (typeof fn === 'function') {
stack.push(fn);
}
}
window.XMLHttpRequest.prototype[off] = function (fn) {
for (var i = 0, l = stack.length ; i < l ; i += 1 ) {
if (stack[i] === fn) {
stack.splice(i, 1);
break;
}
}
}
window.XMLHttpRequest.prototype[method] = function () {
var args = Array.prototype.slice.call(arguments);
var ret = old.apply(this, args);
for (var i = 0, l = stack.length ; i < l ; i += 1 ) {
stack[i].apply(this, args);
}
return ret;
}
window.XMLHttpRequest.prototype[method].old = old;
}
}
over('open', 'onOpen', 'offOpen')
XMLHttpRequest.prototype.onOpen(function () {
this.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
});
}());
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.