JQueryを操作するにはどのような方法がありますか?-フロントエンドQ&A-php.cn

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

青灯夜游

リリース： 2023-01-04 09:15:45

オリジナル

2575 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 はバックグラウンドサーブレットと対話する必要があります:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">response.setCharacterEncoding("utf-8"); System.out.println(request.getParameter("name")); System.out.println(request.getParameter("age")); response.getWriter().println("你找到我了");</pre><div class="contentsignin">ログイン後にコピー</div></div>

バックグラウンド出力:

我是谁
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("{&#39;name&#39;:&#39;爱你&#39;,&#39;age&#39;: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 サイトの他の関連記事を参照してください。