17

Jquery.Form プラグインにはエラー処理機能がないようで、非常にイライラします。ドキュメントには $.ajax オプションを使用できると記載されていますが、特に 500 および 400 シリーズでサーバーがエラーを返した場合、「エラー」オプションを使用することはできません。このプラグインはサーバーからのエラーをまったく処理できないのでしょうか、それともバグなどでしょうか? このプラグインでエラー (400、500 など) を処理する方法を教えてください。私はあなたの助けが必要です...私が欲しいのは簡単なエラー処理だけです...ありがとう。

$("#uploadingImg").hide();

var options = {//Define ajax options
    type: "post",
    target: "#responsePanel",
    beforeSend: function(){
        $("#uploadingImg").show();
    },
    complete: function(xhr, textStatus){
        $("#uploadingImg").hide();
    },
    success: function(response, statusString, xhr, $form){
        // I know what to do here since this option works fine
    },
    error: function(response, status, err){
        // This option doesn't catch any of the error below, 
        // everything is always 'OK' a.k.a 200
        if(response.status == 400){
            console.log("Sorry, this is bad request!");
        }
        if(response.status == 601){
            sessionTimedOut();
        }
    }
}
$("#polygonUploadForm").submit(function(){
    $(this).ajaxSubmit(options); // Using the jquery.form plugin
    return false;
});
4

5 に答える 5

49

jQuery Form Pluginはエラーを処理し、ドキュメントは $.ajax オプションを使用できると述べています。ただし、プラグインが実行されるモードには、通常とファイルのアップロードの 2 つがあります。あなたが抱えている問題は、ファイルのアップロードを実行しているためです。(あなたはこれを言いませんが、「#uploadingImg」と「#polygonUploadForm」があり、再帰的な理由で、この問題が発生しています。)

これはよく言われますが、AJAX でファイルをアップロードすることはできません。この回避策は、iframe を使用することです。フォーム送信は、通常の HTTP リクエストを POST し、iframe にサーバー レスポンスをロードします。プラグインは応答を取得し、出来上がりです。これは通常の HTTP リクエストとして発生するため、$.ajax のルールと動作は適用されません(使用されていないため)。Form プラグインができる唯一のことは、取得したものをすべて成功として扱うことです。コード用語では、ファイルのアップロードによって、ajaxForm() または ajaxSubmit() に割り当てられた「エラー」属性がトリガーされることはありません。これが AJAX リクエストではないことを本当に証明したい場合は、ajaxComplete() ハンドラーをフォームにアタッチします (つまり、フォーム プラグインのメソッドから完全に独立しています)。発動することもありません。または、Firebug の Net->XHR パネルを見てください。

つまり、アップロードは AJAX リクエストではありません。あなたができる最善のことは、ajaxForm()/ajaxSubmit() の「成功」または「完了」コールバック内で作業することです。実際の HTTP 応答コードへのアクセスは制限されていますが、応答を調べることはできます。応答が空であるか、期待どおりでない場合は、実際に を呼び出して「エラー」コールバックをトリガーできますxhr.abort()。「if(good response) {yay!} else {oh no!}」を実行する代わりに、abort() を呼び出して「エラー」をトリガーすると、コードが少しすっきりして理解しやすくなります。コード例を次に示します。

$("#uploadForm").ajaxForm({
    success: function(response, textStatus, xhr, form) {
        console.log("in ajaxForm success");

        if (!response.length || response != 'good') {
            console.log("bad or empty response");
            return xhr.abort();
        }
        console.log("All good. Do stuff");
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log("in ajaxForm error");
    },
    complete: function(xhr, textStatus) {
        console.log("in ajaxForm complete");
    }
});

悪い意志の応答は、コンソール ログに次のように出力されます。

[jquery.form] state = uninitialized
"NetworkError: 404 NOT FOUND - http://server/fileupload/"
[jquery.form] state = loading
[jquery.form] isXml=false
in ajaxForm success
bad or empty response
[jquery.form] aborting upload... aborted
in ajaxForm error
in ajaxForm complete
in ajaxForm complete

「完了」コールバックが 2 回実行される理由がわかりません。最後に、jQuery または Form プラグインが iframe の HTTP ヘッダーを読み取れない理由を知りたい場合は、このスレッドをお読みください。

于 2011-08-11T01:04:52.990 に答える
1

Jquery Form Plugin は、サーバーの応答ステータスの成功 (コード 200) を処理します。情報は十分であると思います。

そこから、応答ステータスサーバー側を作成できます

            return $this->returnJson(array(
                'response' => 'success',//error or whatever
                'data' => 'Succesfully saved in the database'
            ));

もちろん、returnJson は Json データを送信する関数です (作成するか、メソッド内で行うことができます)。

フロントエンドの成功ハンドル (応答が 200 のときに発生) では、ステータス フィールド (この場合は「応答」) を確認する必要があります。以下に例を示します。

  var options = {
        dataType : 'json',
        success: handleResponse
    };


    function handleResponse (responseText, statusText, xhr, $form){

          if(responseText.response == 'success') {
                  //do something

                }else if(responseText.response == 'error'){
                    //do something

            }


    }
于 2015-01-16T08:54:18.373 に答える
1

「file input」タグがファイルのアップロードを処理する方法が原因で、jquery.form プラグイン自体が応答ヘッダーにアクセスできないため、jquery.form プラグイン自体がサーバー エラーを処理しないことがわかりました。したがって、CSS でスタイルを設定できないだけでなく、サーバーの応答処理を容易にしない、厄介なタグをW3Cが見直す必要があると思います。

それを回避する方法があるはずですが...

何か間違ったことを言ったら教えてください。この「ファイル入力」タグについてのあなたの考えを教えてください...

于 2010-10-25T11:14:08.107 に答える
0

オプションで

var options = { 
    target:        '#output2',    
    beforeSubmit:  showRequest,   
    success:       showResponse,  
timeout:    1000
};

エラーが発生した場合のトリガー呼び出しはありません。500または404を取得すると、プラグインがハングします。成功は「成功」にのみ作用するため、現時点ではこれですべてです。

于 2011-01-25T11:04:40.060 に答える
0

まだこれを必要としている人にとって、これはそれを機能させる方法です

function submitForm()
{
    var isSuccess   = false,
        options = {
            url         : "posturl.php",
            type        : 'POST',
            dataType    : 'json',
            success:function(msg) {
                //set the variable to true
                isSuccess = true;

                //do whatever
            },
            complete: function () {
                if (isSuccess === false) {
                    //throw the error message
                }
            }
        };

    //Ajax submit the form
    $('#your_form').ajaxSubmit(options);

    // always return false to prevent standard browser submit and page navigation
    return false;
 }
于 2014-07-22T18:06:44.980 に答える