17

jQuery.ajax() を使用して mvc アクションにリクエストを行う ajax 呼び出しがあります。これはすべてうまくいきました。ただし、一部のフォームにファイル コントロールがあるため、jQuery.ajax() の使用から XMLHttpRequest の使用に変更し、HTML5 ファイル 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 呼び出しのヘッダーを送信しない理由はありますか?

4

3 に答える 3

22

X-Requested-WithjQueryによって自動的に追加されます。を使用して、自分で簡単に追加できますAjaxRequestObject.setRequestHeader()。ドキュメント

于 2012-09-21T15:23:28.630 に答える