JQueryを操作するにはどのような方法がありますか?

Jquery インタラクション メソッドは次のとおりです: 1. サーバーからデータをロードし、返されたデータを選択した要素に配置する load メソッド; 2. HTTP GET リクエストを通じてサーバーからデータを要求する GET メソッド; 3. , HTTP POSTリクエストでサーバーにデータを要求するPOSTメソッド、4. json形式のオブジェクトを直接返すgetJSONメソッド、5. jQuery.ajax()メソッド、6. フォームに添付されているフォームの部分更新メソッド。

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

jquery ajax フロントエンドとバックエンドの対話の 6 つの方法

最初の方法: ロード、からのデータのロード選択した要素にデータを配置します。#

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失败："+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，  
加载到指定的 <div> 元素中：
实例：
$("#div1").load("demo_test.txt #p1");

#2 番目: GET メソッド:

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});

3 番目のメソッド: POST メソッド:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

POST はバックグラウンド サーブレットと対話する必要があります:

<pre class="brush:js;toolbar:false;">response.setCharacterEncoding(&quot;utf-8&quot;); System.out.println(request.getParameter(&quot;name&quot;)); System.out.println(request.getParameter(&quot;age&quot;)); response.getWriter().println(&quot;你找到我了&quot;);</pre>

バックグラウンド出力:

我是谁
12

バックグラウンド サーブレットにアクセスするには、次のようにアドレスを直接記述することもできます:

$.get("JsonServlet",

#4 番目: getJSON メソッド:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>

返されるオブジェクトは、JSON.parse メソッドの変換なしで、直接 json 形式になります。

注: どの方法を使用する場合でも、バックグラウンドがフロント デスクと対話するには 2 つの方法があります。

最初のバックグラウンド対話: 文字列を直接接続します。

response.getWriter().  
print("{\"name\":\"爱你\",\"age\":12}");

2 番目のタイプの受信 JSON オブジェクト:

JSONObject jsonObject =  
new JSONObject("{'name':'爱你','age':12}");
response.getWriter().print(jsonObject);

同じものが最終的にフロント デスクに渡されると、次の形式で渡されます。

getJSON メソッド

に加えて、フロント デスクは 2 つのメソッドを使用して文字列を JS オブジェクトに変換できることに注意してください。 5 種類あるの? なぜですか? 先ほど 4 種類について話しました。
はい、もう 1 つあります:

5 番目のタイプ: jQuery.ajax():

非同期 HTTP (Ajax) リクエストの実行

このメソッドは、jQuery の基礎となる AJAX 実装です。すべての jQuery AJAX メソッドは、ajax() メソッドを使用します。 。シンプルで使いやすい高レベルの実装については、.get

,

$.get,$

を参照してください。

以上がJQueryを操作するにはどのような方法がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。