jqueryでajaxリクエストを使用する方法

jquery では、AJAX (非同期 HTTP) リクエストの実行に使用される「$.ajax」メソッドを使用できます。これは通常、他のメソッドでは完了できないリクエストに使用されます。構文は「」です。 $.ajax([settings ])"; ここで、 settings は、Ajax リクエストを構成するための一連のキーと値のペアを表します。

この記事の動作環境: Windows 10 システム、jquery バージョン 3.6.0、Dell G3 コンピューター。

jquery で ajax リクエストを使用する方法

1. 前の Ajax リクエスト

Ajax リクエストの実装は 5 つのステップに分かれています:

1. リクエストオブジェクトの作成
2. サーバーとの接続情報の設定
3. サーバーへのデータ送信
4. コールバック関数の設定
5. サーバーからの応答データを受け取る

この5つの手順を毎回書くのは面倒なので、jQueryを使って実装するのが簡単です。

2. jQuery を使用して実装する

構文

$.ajax([settings])
settings は、設定するための一連のキーです。 ajax リクエストの値のペア、特定のパラメーターの説明は次のとおりです (パラメーター ソースの初心者向けチュートリアル)

#scriptCharset 要求された文字セットを指定します。 success(リクエストが成功したときに実行される関数。 timeoutローカル要求のタイムアウト (ミリ秒単位) を設定します。 traditional従来のスタイルのパラメータシリアル化を使用するかどうかを指定するブール値。 typeリクエストのタイプ (GET または POST) を指定します。 urlリクエストを送信する URL を指定します。デフォルトは現在のページです。 usernameHTTP アクセス認証リクエストで使用されるユーザー名を指定します。 xhrXMLHttpRequest オブジェクトの作成に使用される関数。

3. 実装手順

jsp/html ページにページを作成し、ajax リクエストを送信します

jQuery を使用してログインおよび登録ページを作成します。特定のコードは記事の最後に添付されています

例としてログイン関数の実装を取り上げます。ajax リクエストは次のとおりです:

$.ajax({
    			type : "POST",			//以post方法提交数据给服务器
    			url : "User",				//提交数据到User
    			dataType : "text",		//数据类型
    			data : {						//传给服务器的数据
    				"name": $("#name").val(),			
    				"password":$("#pwd").val()
    				},
    			success:function(msg) {			//回调函数
    				if(msg =="OK"){
    					alert("登录成功！");
    				}
    				else{
    					alert("登录失败！");
    				}
    			}});

web.xml 設定の作成ファイル

#ユーザーが今入力した URL アドレス それが何であり、どこから来たのかが、この構成ファイルを通じてコン​​ピューターに伝えられる内容です。

<servlet>
		<!-- servlet-name相当于是你想要找的文件的一个别名，一般用类名来代替 -->
    <servlet-name>User</servlet-name>
    <!-- servlet-class 是类的具体位置，不用加.java -->
    <servlet-class>scau.User</servlet-class>
  </servlet>
  <servlet-mapping>
  	<!-- 这里的servlet-name必须和上面的一致 -->
    <servlet-name>User</servlet-name>
    <!--自己定义的名称，url写的就是这个 -->
    <url-pattern>/user</url-pattern>
  </servlet-mapping>

関係を探しています:

#Java クラスの作成

フロントエンドから渡されたデータを受け入れ、それを受け入れて処理する Java クラスを作成します

public class User extends HttpServlet {
	
	//因为刚刚请求是post，所以用doPost来接受参数
	//如果用get，则用doGet接受参数
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("--------------------------------------------------");
		request.setCharacterEncoding("UTF-8");
		// 接受前端传进来的数据，即刚刚的data
		String name = request.getParameter("name");
		String pwd = request.getParameter("password");
		//在控制台输出参数，验证是否正确
		System.out.println("name:"+name);
		System.out.println("pwd:"+pwd);
		//根据自己的需求处理数据
		//这里没有连接数据库，就假设已经用有一个用户Lee,密码是123，如果输入这个则登录成功，其余则登录失败
		String msg = "";
		if (name.equals("Lee") && pwd.equals("123")) {
			msg = "OK";
		} else {
			msg = "bad";
		}
		//输出结果，看是否是预期结果
		System.out.println("msg:"+msg);
		//返回数据给前端
		//设置编码
		response.setContentType("text/html;charset=UTF-8");
		//创建out对象
		PrintWriter out = response.getWriter();		
		//返回msg给前端
		out.write(msg);
	}}

それでは、コールバック関数を見てみましょう

success:function(msg) {			//msg是刚刚java程序返回的数据
    				if(msg =="OK"){	//如果返回OK，则弹出登录成功的页面
    					alert("登录成功！");
    				}
    				else{			//其他则弹出登录成功的页面
    					alert("登录失败！");
    				}
    			}

3. まとめ

フロントエンドとバックエンドを実現するajax を介した対話。主なプロセスは、フロントエンドがリクエストを送信し、バックエンドがリクエストを受け入れ、最後にデータがフロントエンドに送信されることです。 jQuery を使用すると、コードの量が大幅に削減され、理解しやすくなります。手順は主に 3 つの主要な手順に分かれています。

#ページを作成してリクエストを送信

#web.xml を作成
1. #Java クラスを作成
2. 関連チュートリアルの推奨事項:
3. AJAX ビデオ チュートリアル
、

jQuery ビデオ チュートリアル

名前	値/説明
async	リクエストが非同期で処理されるかどうかを示すブール値。デフォルトは true です。
beforeSend(xhr)	リクエストを送信する前に実行する関数。
cache	ブラウザが要求されたページをキャッシュするかどうかを示すブール値。デフォルトは true です。
complete(xhr,status)	リクエストが完了したときに実行される関数 (リクエストが成功または失敗した後に呼び出されます)成功後およびエラー関数)。
contentType	データをサーバーに送信するときに使用されるコンテンツ タイプ。デフォルトは「application/x-www-form-urlencoded」です。
context	すべての AJAX 関連のコールバック関数の「this」値を指定します。
data	サーバーに送信するデータを指定します。
dataFilter(data,type)	XMLHttpRequest の生の応答データを処理するために使用される関数。
dataType	サーバー応答の予期されるデータ型。
error(xhr,status,error)	リクエストが失敗した場合に実行する関数。
global	グローバル AJAX イベント ハンドラーをリクエストに対してトリガーするかどうかを指定するブール値。デフォルトは true です。
ifModified	最後のリクエスト以降に応答が変更された場合にのみリクエストが成功するかどうかを指定するブール値。デフォルトは false です。
jsonp	コールバック関数の文字列を jsonp に書き換えます。
jsonpCallback	jsonp 内のコールバック関数の名前を指定します。
password	HTTP アクセス認証リクエストで使用されるパスワードを指定します。
processData	リクエストを通じて送信されたデータをクエリ文字列に変換するかどうかを指定するブール値。デフォルトは true です。
result,status,xhr)

以上がjqueryでajaxリクエストを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。