jquery が Ajax リクエストを実装する方法

Ajax リクエストを実装するための jquery メソッド: 1. "$.ajax()" メソッド; 2. "$.post()" メソッド、コードは "$.post(url, data, func, dataType) ;"; 3. "$.get()" メソッド、コードは "$.get(url, data, func, dataType);"; 4. "$.getJSON()" メソッドなど。

このチュートリアルのオペレーティング システム: Windows 10 システム、jQuery3.6.0 バージョン、Dell G3 コンピューター。

jquery は Ajax リクエストを実装します

Ajax は、ページ全体を更新せずにブラウザとサーバー間の通信に使用されます。サーバーは全体を返さなくなります。ページですが、データの一部を返し、JavaScript DOM 操作を通じてノードを更新します。データ送信形式にはxmlやjsonなどの形式がありますが、最もよく使われるのはjson形式です。
JavaScript オブジェクト XMLHttpRequest を使用してネイティブ Ajax を実装できますが、このメソッドはより複雑で作成が困難です。 jQuery は Ajax をカプセル化し、Ajax リクエストの開始を容易にします。この記事では、jQuery が Ajax を実装するプロセスを簡単に紹介します:

1. jquery.js ファイルを タグに導入します

 <script src="https://code.jquery.com/jquery-3.6.1.js"></script>

2. いくつかの一般的な jQuery Ajax メソッド

(1)$.ajax()
①url: リンク アドレス、文字列
を表します。 ②data: (オプション) サーバーに送信されるデータ (GET と POST の両方) は、キー/値ペアの形式で表現されるリクエスト文字列形式に自動的に変換され、リクエストに添付されます。 as QueryString URL の形式は {A: '...', B: '...'}
③type: "POST" または "GET"、リクエスト タイプ
④timeout: リクエスト タイムアウト、単位はミリ秒、値は
を表します。 ⑤cache: リクエスト結果をキャッシュするかどうか、ブール値は
を意味します ⑥contentType: コンテンツ タイプ、デフォルトは "application/x-www-form-urlencoded"
⑦dataType: のデータ型サーバーの応答。文字列で表されます。 json として入力すると、コールバック関数でデータを json
に逆シリアル化する必要はありません。 ⑧success: リクエストが成功した後にサーバーによってコールバックされる関数です。
⑨error : リクエストが失敗した後にサーバーによって呼び戻される関数
⑩complete: リクエストが完了した後に呼び出される関数、リクエストが成功したか失敗したかに関係なく、この関数が呼び出されます。成功関数とエラー関数が設定されている場合、関数はそれらの後に呼び出されます
⑪async: 非同期に処理するかどうか、ブール値は、デフォルトは true です。この値を false の後に設定すると、JS は下向きに実行されませんが、サーバーがデータを返し、対応するコールバックを完了するのを待ちます。下向きに実行する前の関数
⑫username: アクセス認証リクエストに含まれるユーザー名、文字列表現
⑬password: 認証リクエストに含まれるパスワードを返します。文字列は

 <script type="text/javascript">
        function login1(){
            $.ajax({
                //${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名
                url: "${pageContext.request.contextPath}/user/returnJson",
                type: "GET",
                data:'{name: 'James'}', //必须是字符串格式
                contentType:"application/json", //指定内容格式
                dataType:json,
                success: function(data) {  //括号里的data是服务器返回的数据
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            });
        }
    </script>

<script>
    $('#btn1').click(function () {
        $.ajax({
            type:"post",	//提交方式
            url:'${pageContext.request.contextPath}/JSONServlet',
            data:{
                bookname:  $("#bookname").val()//val() 方法返回或设置被选元素的值。
            },
            dataType: "json",   	//返回数据的格式
            success:function (responseData) {
                var html = "";
                $('#dataTable tr:not(:first)').remove(); //删除第一行之外的所有行
                // $('#dataTable > tbody > tr').remove();   // 删除所有行，表头会被删除
                console.log(responseData);
                for (var i = 0; i < responseData.length; i++) {
                    html += &#39;<tr>';
                    html += '<td>'+responseData[i].bookid+'</td>'+'<td>'+responseData[i].bookname+'</td>'+'<td>'+responseData[i].price+'</td>'
                    html += '</tr>';
                }
                $('#dataTable').append(html);
            },
        });
    });
</script>

(2 )$.post()

POST メソッドを使用して、サーバーからの Ajax リクエストを実行し、データをダウンロードします。
形式: $.post(url, data, func, dataType);
オプションのパラメータ:
①url: リンク アドレス、文字列表現
②data: サーバーに送信する必要があるデータ形式 {A: '…', B: '…'}
③func: リクエストが成功した後にサーバーによってコールバックされる関数; function(data, status, xhr)、data はサーバーによって返されたデータです。サーバー、ステータスは応答ステータス、xhr は XMLHttpRequest オブジェクトです。個人的には、データ パラメーターに注目してください
④dataType: サーバーによって返されるデータの形式

<script type="text/javascript">
        function login2(){
            $.post(
                "${pageContext.request.contextPath}/user/returnJson",
                 '{name: 'James'}',
                  "application/json",
                 function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(3)$ .get()

GET メソッドを使用すると、Ajax リクエストが実行され、サーバーからデータがロードされます。
フォーム: $.get(url, data, func, dataType);

<script type="text/javascript">
        function login3(){
            $.get(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(4)$.getJSON()

フォーム: $.getJSON (url, data, func);
GET メソッドを使用して Ajax リクエストを実行し、サーバーから JSON 形式のデータを読み込みます。

<script type="text/javascript">
        function login4(){
            $.getJSON(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

注: サーバーから返されるデータ形式は json であると判断されるため、このメソッドでは dataType を指定する必要はありません。

(5)$.load()

サーバーによってロードされたデータを、指定された DOM 内のノードに直接挿入します。
形式: $.load(url, data, func);
データが存在する場合は POST を使用してリクエストが送信され、データが存在しない場合は GET を使用してリクエストが送信されます。

rree

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