最近、多くのフロントエンドの学生は、ログインフォームにログインしてもアカウントを記録できないと不満を述べています。これは、より多くのAjaxを使用する単一ページのアプリケーションとWebページにとって依然として一般的な問題です。
userAppは、AngularJSを使用して構築されたWebAppですが、ブラウザの「パスワードの保存」機能をサポートすることはできませんでした。
ここにいくつかの問題があります：
JSを使用してフォームをDOMに動的に挿入することはできません。
フォームは実際にPOSTリクエストを発行する必要があります。 （フォームコンテンツを取得できず、Ajaxでリクエストを行うことができません）
ブラウザがフォームに自動的に入力された場合、$ Scopeは更新されたデータを取得できません。
Firefoxは比較的簡単です。フォーム要素に名前属性がある限り、送信イベントをトリガーした後、データを記録するかどうかをユーザーに自動的に思い出させます。
コードコピーは次のとおりです。
<form name = "login-form" ng-submit = "login（）">
<入力id = "login" name = "login" type = "text" ng-model = "user.login">
<入力ID = "パスワード" name = "password" type = "password" ng-model = "user.password">
</form>
Firefoxがデータを記録するための要件は比較的簡単です
しかし、Firefoxには問題があります。フォームが自動的に入力された後、$スコープのデータは更新されません。そこで、私はグーグルで検索し、この問題のいくつかのハックを見つけました。しかし、私はこれらのソリューションが不要であると常に感じています。なぜなら、私が必要なのは、いくつかの非常に軽薄なデータの双方向の結合技術ではなく、フォームを送信するときにデータを提出することだけだからです。そこで、非常に簡単な方法を使用しました。フォームを送信するときにフォーム要素の値を取得します。
コードコピーは次のとおりです。
$ scope.login = function（）{
$ scope.user = {
ログイン：$（ "＃login"）。val（）、
パスワード：$（ "＃password"）。val（）
};
...
falseを返します。
};
わかりました、今はFirefoxに問題はありませんが、Chromeをどうすればよいですか？
Chromeは、フォームフォームが実際にPOSTリクエストを開始したときにパスワードを保存するかどうかユーザーにのみ促しますが、このようにして、AJAXで動作することはできません。
これが解決策です：
フォームがPOSTリクエストを行ったら、ng-submitでそれをインターセプトし、falseを返してブロックし、ajaxでデータを送信します。
Ajaxが正常に戻ったら、セッションをCookieに保存し、フォームを再送信します。
ページがリロードされると、認定されていることがわかり、ホームページにリダイレクトされます。
これによりページが1回更新されますが、ログインするときに更新するだけです。ページが同じアドレスで返されることを確認してください。
ただし、フォームがDOMに動的に追加されている場合、このメソッドはまだ機能しません。解決策は、index.htmlに隠されたフォームを追加することです。データを送信する必要がある場合は、他のフォームによって運ばれたデータを隠されたフォームにコピーします。
私はそれを指示にパッケージ化しました：
コードコピーは次のとおりです。
app.directive（ "ngloginsubmit"、function（）{
戻る {
制限：「A」、
スコープ：{
OnSubmit： "= ngloginsubmit"
}、
リンク：function（scope、element、attrs）{
$（element）[0] .Onsubmit = function（）{
$（ "＃login-login"）。val（$（ "＃login"、element）.val（））;
$（ "＃login-password"）。val（$（ "＃password"、element）.val（））;
scope.onubmit（function（）{
$（ "＃login-form"）[0] .submit（）;
}）;
falseを返します。
};
}
};
}）;
index.htmlに隠された形式：
コードコピーは次のとおりです。
<form name = "login-form" id = "login-form" method = "post" action = "" style = "display：none;">
<input name = "login" id = "login-login" type = "text">
<入力name = "password" id = "login-password" type = "password">
</form>
一時的なログインフォーム
コードコピーは次のとおりです。
<form name = "login-form" autocomplete = "on" ng-login-submit = "login">
<入力id = "login" name = "login" type = "text" autocomplete = "on">
<入力id = "password" name = "password" type = "password" autocomplete = "on">
</form>
ログイン用コントローラー：
コードコピーは次のとおりです。
$ scope.login = function（submit）{
$ scope.user = {
ログイン：$（ "＃login"）。val（）、
パスワード：$（ "＃password"）。val（）
};
function ajaxcallback（）{
提出する（）;
}
falseを返します。
};
更新すると、フォームを再送信するかどうかが促されます
この問題は解決されましたが、F5を押すたびに、ブラウザはフォームを再提出するかどうかを思い出させます。これは本当に少しクソなので、pre-login.htmlファイルを追加し、非表示フォームがデータを提出してからindex.htmlにリダイレクトします。
今は大丈夫です〜