ブラウザのオートコンプリート/保存フォームがajaxリクエストで機能しない

Question

これについて検索エンジンでキーワードの組み合わせを検索するのは本当に難しいです。なぜなら、最も人気のある開発者が使用しているのは、ajaxによるカスタムオートコンプリートを望んでいたからです。

ほとんどの開発者は、カスタムオートコンプリートについて検索して、ajaxによってdbから結果を取得するか、セキュリティ上の理由でブラウザーのオートコンプリートを無効にする方法、または別のオートコンプリートエクステンダーを使用したいと考えています。

ただし、オートコンプリートについては説明していません。テキストボックスにテキストを入力するときにドロップダウンの最近の選択のように動作する、単純な通常のブラウザーのオートコンプリートまたはIEまたはFFのブラウザー保存フォームについて見つけました。

ログインフォームにユーザー名やパスワードなどのフォームを入力するのは簡単で通常です。フォームが送信された（フォームデータの投稿）後、ブラウザはオートコンプリートを保存するか、FFのイベントがパスワードとともに保存するよう要求します。

今、ajax経由で送信されたログインについて考えてみましょう。フォームがpostメソッドによって送信されないため、IEまたはFFによってフォームデータが自動的に保存されません。これは、ajax対postメソッドが原因であると確信しています。

この方法を使用するDotNetNukeのようなCMSは、開発目的で5ユーザーログインのユーザー名とパスワードを入力するのが非常に難しいのですが、カスタムまたはエクステンダーなしでユーザーが自分のフォームデータをブラウザーに保存できるようにするイベントです。別の例では、ユーザーは同じメールを表示および使用して、Webサイトまたはドメイン全体のメールフォームに入力できます。

これを回避する方法は？ どのキーワードが検索に適しているかを提案しましたか？

CallMeLaNN

Answer 1

同じ問題が発生しています。 AJAX投稿を行う前にJavaScript経由で送信する非表示のiframeを追加することで、FireFoxで解決できました。 Chrome / IEで動作するものはまだ見つかりません。

Answer 2

同じ問題に直面し、少し検索しました。ログインページがある場合、これを解決するための最も便利な方法は以下のソリューションだと思います。 ajaxを介して送信されたログインを検討する場合、ユーザー名とパスワードのフィールドにオートコンプレート機能を追加したり、提供したりするブラウザーはありません。ただし、javascriptの送信機能を使用する場合（おそらく古いバージョンのブラウザーと互換性がありません）、すべてのブラウザーがIEを除くユーザー名とパスワードの保存を提供します。しかし、私はIEがユーザー名とパスワードを保存することを提案する別のjavascriptトリッキーを見つけました。

ログインページで、ユーザー名とパスワードを処理し、ajaxリクエストでサーバーサイドに送信しました。ログインが成功した場合は、以下の方法でフォームを送信しました。ログインに失敗したこと。

以下のリンクを確認してください：

  

[編集]：リンクが壊れています

リンクされているページにこの問題に関する固定ページがあります。私の評判のため、別のリンクを提供することはできません。ページで以下の引用を検索してください：

  

固定ページをご覧ください。

もちろん、フォームを送信するためにデフォルトページにログインセクションがある場合、このアプローチは適合しません。これにより、ページがちらつきます。誰かがそれについて考えているのだろうか？

Answer 3

フォームをajax（$ .postメソッド）経由で実際のバックエンドスクリプトとiFrame経由でダミースクリプトの両方に送信する控えめなjs jQueryコードがあります。そのため、ブラウザーは送信されたデータを後続のオートコンプリート用に保存します。

これは、クロムの下でうまく機能しています。フィードバックは大歓迎です！

var  formframesindex = 0;
function onSubmitAjax(evt){
    var $form = $(this);
    var framesubmitting = $form.hasClass('framesubmitting');
    var action = $form.attr('action');
    var original_action = action;

    if(!framesubmitting){
        $.post(action,$form.serialize()+"&ajax=1", function(responseText,message,request){
            formResponseHandler(responseText);
        }, "json");


        formframesindex++;
        var formframe = $("<iframe name='formframe_id_"+(formframesindex)+"' id='formframe_id_"+(formframesindex)+"' class='formframe' src='/fakeformreceiver.php'></iframe>");
        $('body').append(formframe);
        var target = $form.attr('target');
        $form.data('originaltarget',target);
        $form.data('originalaction',original_action);
        $form.attr('target','formframe_id_'+formframesindex);
        $form.attr('action','/fakeformreceiver.php');
        $form.addClass('framesubmitting');
        $form.submit();

    } else {
        var current_target = $form.attr('target');
        var original_action = $form.data('originalaction');
        var original_target = $form.data('originaltarget');
        var $frame = $('#'+current_target);
        setTimeout(function(){
            if($frame && $frame.length){
                $frame.remove();
            }
            $form.attr('action',original_action);
            $form.attr('target',original_target);
            $form.removeClass('framesubmitting');
        },100);
    }
    return framesubmitting;
}