プロの頃から開発プロジェクトが完了するまで、AjaxやCookieに関連する技術を理解したいと思っていたのですが、ようやく理解できました。この記事をレコードとして書き、初心者の簡単な理解にも役立てることができます。 。
まず、フロントエンドページのフォームフォームを見てみましょう。
<div class="form-signin text-center">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputUserName" class="sr-only">用户名</label>
<input type="email" id="inputUserName" class="form-control s-margin-2" placeholder="用户名" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control s-margin-1" placeholder="密码" required>
<button class="btn btn-lg btn-primary btn-block s-margin-2" onclick="userLogin()">登录</button>
<button class="btn btn-lg btn-default btn-block s-margin-2" onclick="toRegister()">注册</button>
</div >
以下はJSコードです。
function userLogin() {
var user = {
};
user.userName = document.getElementById("inputUserName").value;
user.userPassword = document.getElementById("inputPassword").value;
var response;
$.ajax({
async : false,//发送同步请求
type : 'POST', //请求方式为post
url : address+"userLogin", //发送请求的地址。
data : user, //发送到服务器的数据
dataType : 'json',//预期服务器返回的数据类型
success : function(result) {
response = result;
},
error : function(result) {
alert('服务器异常');
}
});
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
}
完了したい機能は、Ajaxを介してログインフォームを確認し、Cookieを設定することです。
以下では、青いテキストを使用してコード実行プロセス全体を記録します1.ログインボタンをクリックして、機能をトリガーします2.JSで機能を実行します3.ユーザー名を取得します。パスワードに入力されたデータはユーザー変数に保存されます。4。フロントエンドの対話のためにAjaxが実行されます
"userLogin()""userLogin()"
以下に、ajaxの一般的なパラメーターを紹介します
1. url：文字列タイプパラメータ（デフォルトは現在のページアドレス）リクエストが送信されるアドレス。
2.type：文字列型パラメーター。リクエストメソッド（postまたはget）はデフォルトでgetになります。：putやdeleteなどの他のhttpリクエストメソッドを使用できますが、それをサポートしているのは一部のブラウザのみです。
3.timeout ::数値タイプパラメータ、リクエストタイムアウト時間（ミリ秒）を設定します
4. async：ブール型パラメーター。デフォルト設定はtrueです。すべての要求は非同期要求です。つまり、データ要求と同時に、他のコードステートメントも同期的に実行できます。false：同期要求を送信するには、次のようにする必要があります。前のコードは終了しておらず、後ろのコードはブロック状態になっています。
5.cache：ブール型パラメーター。デフォルトはtrueです（dataTypeがscriptの場合、デフォルトはfalseです）：falseに設定すると、要求情報はブラウザーのキャッシュからロードされません。
6.data：オブジェクトまたは文字列タイプのパラメータ、サーバーに送信されるデータ：文字列でない場合は、自動的に文字列形式に変換されます。getリクエストはURLに追加されます。
オブジェクトはキー/値形式である必要があります。たとえば、{k1： "v1"、k2： "v2"}は＆k1 = v1＆k2=v2に変換されます。配列の場合、JQueryは同じ名前に異なる値を自動的に割り当てます。たとえば、{v：["k1"、 "k2"]}は＆k = v1＆k=v2に変換されます。7. dataType：文字列型パラメーター。サーバーから返される予期されるデータ型。
1）xml：JQueryで処理できるXMLドキュメントを返します。
2）スクリプト：プレーンテキストのJavaScriptコードを返します。結果は自動的にキャッシュされません。キャッシュパラメータが設定されていない限り。（同じドメインの下ではなく）リモートリクエストを行う場合、すべての投稿リクエストは取得リクエストに変換されることに注意してください。
3）json：JSONデータを返します。：・
4）jsonp：JSONP形式。myurl？callback = ?などのSONP形式で関数を呼び出す場合、JQueryは最後の「？」を正しい関数名に自動的に置き換えてコールバック関数を実行します。
5）text：プレーンテキストの文字列を返します。
6）html：プレーンテキストのHTML情報を返します。含まれているスクリプトタグは、DOMに挿入されたときに実行されます。：：
指定されていない場合、JQueryはhttpパッケージのmime情報に従ってresponseXMLまたはresponseTextを自動的に返し、それをコールバック関数パラメーターとして渡します。8.beforeSend：タイプFunctionのパラメーターが必要です。これにより、カスタムHTTPヘッダーの追加など、リクエストを送信する前にXMLHttpRequestオブジェクトの関数を変更できます。beforeSendでfalseを返すと、このajaxリクエストをキャンセルできます。XMLHttpRequestオブジェクトが唯一のパラメーターです。
function（XMLHttpRequest）{this;//このajaxリクエストを呼び出すときに渡されるoptionsパラメーター
}9.complete：パラメーターは関数型である必要があり、要求が完了した後に呼び出されるコールバック関数（要求が成功または失敗したときに呼び出されます）。パラメータ：XMLHttpRequestオブジェクトと成功したリクエストのタイプを説明する文字列。
function（XMLHttpRequest、textStatus）{ this;//このajaxリクエストを呼び出すときに渡されるoptionsパラメーター}10.success：パラメーターは関数型である必要があり、要求が成功した後に呼び出されるコールバック関数。2つのパラメーターがあります。
（1）サーバーから返され、dataTypeパラメーターに従って処理されるデータ。
（2）状態を説明する文字列。
function（data、textStatus）{ //データはxmlDoc、jsonObj、html、textなどです。this ;//このajaxリクエストを呼び出すときに渡されるオプションパラメータ}11.error：タイプFunctionのパラメーターが必要です。これは、要求が失敗したときに呼び出される関数です。この関数には、XMLHttpRequestオブジェクト、エラーメッセージ、キャプチャされたエラーオブジェクト（オプション）の3つのパラメーターがあります。ajaxイベント関数は次のとおりです
。function（XMLHttpRequest、textStatus、errorThrown）{ //通常、textStatusとerrorThrownのいずれか1つにのみ情報が含まれます;//このajaxリクエストを呼び出すときに渡されるオプションパラメーター}12.contentType：パラメーターは文字列タイプである必要があります。サーバーに情報を送信する場合、コンテンツのエンコードタイプはデフォルトで「application/x-www-form-urlencoded」になります。このデフォルト値は、ほとんどのアプリケーションに適しています。
下を見て、最初にコードを見てから、 UserController.javaを分析する手順を見てみましょう。
/**
* 用户登录
* @param userName
* @param userPassword
* @return
*/
@PostMapping(value = "/userLogin")
public Response userLogin(@RequestParam("userName")String userName,
@RequestParam("userPassword")String userPassword){
return userService.userLogin(userName,userPassword);
}
}
6.バックエンドurはlパスに従って対応するパスと一致しますController
。7 。メソッドを入力すると、パラメーターuserLoginはajaxによって渡された値を受け取ります。UserService中userLoginUserServiceImpl
UserService：
import com.leaveword.utils.Response;
public interface UserService {
Response getUser(Integer userId);
Response userRegister(String userName,String userPassword);
Response userLogin(String userName,String userPassword);
}
UserServiceImplコードを表示します：
@Override
public Response userLogin(String userName, String userPassword) {
//判断是否输入
if(CommonTools.isEmpty(userName))
return new Response("-1","用户名不能为空");
if(CommonTools.isEmpty(userPassword))
return new Response("-1","用户密码不能为空");
//判断数据库是否存在
User user = userRepository.findByUserName(userName);
if(user != null){
if(user.getUserPassword().equals(userPassword)) {
user.setUserPassword("");
return new Response("0", JSON.toJSONString(user));
}
else
return new Response("-1","密码错误");
}
else
return new Response("-1","用户不存在");
}
9.CommonToolsクラスのメソッドを使用してisEmpty、入力ボックスが入力されているかどうかを判別します
ここで覚えておいてください、クエリが成功した場合、応答には2つのパラメーターがあり、最初のパラメーターには0が割り当てられ、2番目のパラメーターにはユーザーによって変換されたJSONデータが割り当てられます。
CommonToolsコードを表示する：
import java.sql.Timestamp;
public class CommonTools {
public static boolean isEmpty(String str){
if(str == null)
return true;
if(str.isEmpty())
return true;
if(str == "" || str.equals(""))
return true;
return false;
}
public static Timestamp getCurrentTime(){
return new Timestamp(System.currentTimeMillis());
}
}
10.次に、ページから渡されuserRepositoryたユーザー名とパスワード
UserRepositoryがあるかどうかをデータベースに照会します。
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Integer> {
User findByUserName(String userName);
}
11.結果をResponseresponse
Response型の変数に返します。
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Response {
private String status;
private Object content;
}
知らせ：応答変数は2つの値を取得标识符：statusし内容：content、サービスとコントローラーから変数を順番に返し、最終的にフロントエンドAjaxに応答します。12。フロントエンドページAjaxは、要求があった場合、
結果を通じて結果を取得します。
成功した場合は、success : function(result)にresult割り当ててから、フロントエンドresponse変数に割り当てます。リクエストが失敗した場合は、サーバーが異常であることを示す
プロンプトボックスがポップアップ表示されます。alert('服务器异常')
クッキーを設定する方法を説明しましょ
う。フロントエンドのjsコードにクッキーを設定するためのコードを入れましょう。
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
ajaxでのpostリクエストが成功すると、2つの変数が応答に取り込まれ、成功は
13になりますresponse.status。0かどうかを判断するには、0
でない場合はcontent、プロンプトボックスに入力して表示します。
0の場合は、成功したリクエストを表します。次に、util.jsでsetCookie（）メソッド
setCookie（）を呼び出し、util.jsで特定のメソッドを定義します。util.jsのコードを以下に示します。
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);//设置Cookie保存的时间
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
var strCookie=window.document.cookie;
alert("function setCookie里"+strCookie);//弹窗提示
}
14. setCookie（）を呼び出して
、一般的なCookieの次のパラメーターを割り当てます。
1.name：必須パラメーター、これはCookieの変数名です
2.value：オプションのパラメーター、このCookie変数の値
3.expire：オプションのパラメーター、これはCookie変数が保存される時間を設定するために使用されます。1）cookie変数によって節約される時間は、UNIXタイムスタンプから現在のUNIXタイムスタンプを引いたものです。（UNIXタイムスタンプ：1970年1月1日（UTC / GMTの深夜）から経過した秒数です。
2）time（）関数を使用して現在のUNIXタイムスタンプに加えて、保存する時間（秒単位）を取得します。例：setcookie（ "user"、 "Big Fish Sea"、time（）+ 3600）ユーザーcookie変数を3600秒間保存します
。3）現在のタイムスタンプよりも小さいタイムスタンプを設定してcookie変数を削除します。例：setcookie（ "user"、 "big fish sea"、time（）-1）ユーザーcookie変数。
4.path：Cookieの有効な範囲。
1）このパラメータは、次のパラメータドメインに基づく有効な範囲です。パスが「/」に設定されている場合、ドメイン全体で有効です。例：setcookie（ "user"、 "big fish sea"、time（） +3600、 "/"）。これにより、ドメイン内のすべてのディレクトリとファイルがこのCookie変数の値を呼び出すことができます。
2）パスが "/ test"に設定されている場合、ドメインの下の/ testディレクトリとサブディレクトリのみが有効です。たとえば、ドメインの下にはtest1、test2の2つのディレクトリがあり、setcookie（ "user "、" big fish "Hai、time（）+ 3600、" / test1 "）の場合、ユーザーcookie変数の値はtest1ディレクトリでのみ呼び出すことができ、test2ディレクトリでは呼び出すことができません。
5.domain：Cookieのドメイン名は有効です。ドメインがdayuhai.cnに設定されている場合、dayuhai.cnの下のすべてのサブドメインが有効です。例：dayuhai.nには2つのサブドメインjava.dayuhai.cn、css.dayuhai.cnがあり、setcookie（ "user"、 "big fish sea"、time（）+ 3600、 "/"、"javaとして設定します。 dayuhai.cn”）の場合、ユーザーcookie変数の値はjava.dayuhai.cnのサブドメインでのみ取得できます
。6.secure：cookieがセキュアhttpsのみを通過するかどうかを設定します。値は0または1です。値は1、Cookieはhttps接続でのみ有効です。デフォルト値は0です。これは、Cookieがhttp接続とhttps接続の両方で有効であることを意味します。
次に、setCookie（）関数のコードの意味を詳しく説明します。
d.setTime（d.getTime（）+ 24 60 60 1000日）：
- d。getTime（）：時点dでの時間をミリ秒単位で取得します（つまり、1970年1月1日の0:0:000:00から時点dまでの経過ミリ秒数。コンピューターは通常1970年1月を設定します。 1日、0：00：00が初期時間）
24 60 60 1000日：24（1日24時間）* 60（1時間60分）* 60（1分60秒）* 1000（1秒1000ミリ秒）* daysは、日に対応するミリ秒数を取得します。 - d.setTime（d.getTime（）+ 24 60 60 1000日）：有効期限に対応するミリ秒数を追加し、d.setTime（）メソッドを使用してdオブジェクトに割り当てます。
ここでは、Cookieを1日間保存します
window.document.cookie = name +“ =” + value +“; path = /; Expires =” + d.toGMTString（）
- d.toGMTString（）：文字列に変換される前に、日付がローカルタイムゾーンからGMTタイムゾーンに変換されることを示します。
window.document.cookie =は、Cookieに値を割り当てることを意味します。どのような種類の値が割り当てられますか？ドメイン名のすべてのサブドメインに有効で、保存期間は1日で、形式は「name=value」の値です。
より良い説明のためにフロントエンドJSコードを入れましょう
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
15. Cookieを設定すると、ページがジャンプしてログイン機能が完了します
概要：
1。Ajaxリクエスト：ajaxで設定されたパラメーターを介してバックエンドにデータを送信し、対応する関数で検証を完了し、結果をフロントエンドに返してフィードバックを取得します
2. Cookieの設定：ログイン検証時完了したら、setCookie（）メソッドを呼び出し、Cookieの対応する条件パラメーターに従って設定します。
