1

このコードでフォームを処理したい:

 //All form submissions should go through here.
 $(document).on('submit', 'form', function (x) {
     //x.preventDefault();  //commented out because it's not working
     $.ajax({
         url: $(this + '#formdestination').val(), //formdestination is a hidden field, showing where to submit the form
         type: 'post',
         dataType: 'json',
         data: $(this).serialize(),
         complete: function (xhr, status) {
            if (status === 'error' || !xhr.responseText) {
                window.location = '/broken/?err=Inconsolable%20onsubmit%20ajax%20error'; //i'd like the real error here, ideally
            } //end if
            else {
                loader($('#pagedestination').val()); 
                //loader is a function that animates the page as it loads new content.
                //#pagedestination is a hidden field that stores where the page should go when it's done.
                //Yes, I know formdestination and pagedestination could be handled with the form or the backend.  There are reasons that do not matter much here.
            } //end else
        } //end complete function

    });

    return false;
});

私が抱えている問題がいくつかあります。

1.) フォームが送信されると、この関数が呼び出されます。ローダーを呼び出さないか、呼び出す場合は、コントローラーのリダイレクトによってオーバーライドされます。フォームが送信されたときに一般的な送信を防ぐ必要があります。.preventDefault() が正しく機能していません (以下を参照)。

2.) (#1 ほど重要ではありません) もし ajax が失敗したら、正当なエラーを取得したいと思います。どのように？

.preventDefault() で - 試してみると、次のエラーが表示されます: Uncaught SyntaxError: Unexpected identifier

ご協力いただきありがとうございます。

4

2 に答える 2

1

あなたが得るものが他の場所から来ているという例外は、このフィドルにアクセスしてください：http: //jsfiddle.net/DgRLa/

このコードがあります：

$(document).on('click', '.test', function (x) {
    x.preventDefault();  //commented out because it's not working

    $.ajax({
         url: "test.php", //formdestination is a hidden field, showing where to submit the form
         type: 'post',
         dataType: 'json',
         data: $(this).serialize(),
         complete: function (xhr, status) {
             console.log("hi");
         } 
    }).fail(function () {
        alert("error");
    });
});

「clickme」要素をクリックすると、console.logとアラートの両方が表示されます。

「complete」コールバックの代わりに「success」コールバックを使用し、deferred .failを使用してエラーをキャプチャし、次のようにします。

$(document).on('submit', 'form', function (x) {
     x.preventDefault();  //commented out because it's not working
     var url = $(this).attr("action");     

     $.ajax({
         url: url , // Use the form action attribute instead of a hidden field
         type: 'post',
         dataType: 'json',
         data: $(this).serialize(),
         success: function (data) {
             loader($('#pagedestination').val()); 
         } 
    }).fail(function (error) {
         // error has all sorts of fun stuff
    });

    // return false; Dont return false, preventDefault is enough
});

PS：ローダーがユーザーを別のページに送信するとおっしゃっていますが、とにかくページをリダイレクトする場合は、ajaxを使用してフォームを送信する理由がありますか？

于 2013-03-01T17:15:45.083 に答える
1 
$(document).on('submit', 'form', function (x) {
    x.preventDefault();  //x must be inside the anonymous function
    $.ajax({
于 2013-03-01T17:03:01.203 に答える