jQuery - AJAX get() および post() メソッド

HTTP リクエスト: GET と POST

クライアント側とサーバー側でのリクエストとレスポンスの 2 つの一般的な方法は、GET と POST です。

GET - 指定されたリソースからデータをリクエスト POST - 処理対象のデータを指定されたリソースに送信します

GET は基本的にサーバーからデータを取得（取得）するために使用されます。注: GET メソッドはキャッシュされたデータを返す場合があります。

POST はサーバーからデータを取得するためにも使用できます。ただし、POST メソッドはデータをキャッシュしないため、リクエストとともにデータを送信するためによく使用されます。

GetとPostの違い

Getメソッド:
getメソッドを使用して単純なデータを送信できますが、サイズは通常1KBに制限されますデータはURLに付加されて送信されます。 (HTTP ヘッダー送信)、つまり、ブラウザーは、各フォームフィールド要素とそのデータを URL パラメーターの形式でリクエストラインのリソースパスに追加します。最も重要な点は、クライアントのブラウザによってキャッシュされるため、他の人がブラウザの履歴からアカウント番号やパスワードなどの顧客データを読み取ることができるということです。したがって、場合によっては、get メソッドが重大なセキュリティ問題を引き起こす可能性があります。

Post メソッド:
POST メソッドを使用すると、ブラウザーは、URL アドレスのパラメーターとして渡すのではなく、各フォームフィールド要素とそのデータを HTTP メッセージのエンティティコンテンツとして Web サーバーに送信します。 POST を使用する GET メソッドを使用して転送されるデータ量は、GET メソッドを使用して転送されるデータ量よりもはるかに大きくなります。

つまり、GET メソッドは送信するデータ量が少なく、処理効率が高く、セキュリティが低く、キャッシュされますが、POST はその逆です。

$.get() メソッド

$.get() メソッドは、HTTP GET リクエストを介してサーバーにデータを要求します。

構文:

$.get(URL,callback);

必須の URL パラメーターは、リクエストする URL を指定します。

オプションのコールバックパラメーターは、リクエストが成功した後に実行される関数の名前です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("/try/ajax/demo_test.php",function(data,status){   //需要引入demo_test.php文件
                alert("数据: " + data + "\n状态: " + status);
            });
        });
    });
</script>
</head>
<body>
  <button>发送一个GET 请求并获取返回结果</button>
</body>
</html>

$.get() の最初のパラメータは、リクエストする URL (「demo_test.php」) です。

2 番目のパラメータはコールバック関数です。最初のコールバックパラメータには要求されたページのコンテンツが保存され、2 番目のコールバックパラメータにはリクエストのステータスが保存されます。

この PHP ファイル (「demo_test.php」) は次のようになります:

<?php
   echo "这是个从PHP文件中读取的数据";
?>

$.post() メソッド

$.post() メソッドは HTTP POST 経由でサーバーにデータをリクエストしますリクエスト。

構文:

$.post(URL,data,callback);

必須の URL パラメーターは、リクエストする URL を指定します。

オプションの data パラメーターは、リクエストとともに送信されるデータを指定します。

オプションのコールバックパラメーターは、リクエストが成功した後に実行される関数の名前です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $.post("/try/ajax/demo_test_post.php",{
            name:"php中文网",
            url:"//m.sbmmt.com"
            },
            function(data,status){
            alert("数据: \n" + data + "\n状态: " + status);
            });
        });
    });
</script>
</head>
<body>
   <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

$.post() の最初のパラメータは、リクエストする URL (「demo_test_post.php」) です。

その後、リクエスト (名前と都市) とともにデータを送信します。

「demo_test_post.php」の PHP スクリプトは、これらのパラメーターを読み取り、処理し、結果を返します。

3 番目のパラメータはコールバック関数です。最初のコールバックパラメータには要求されたページのコンテンツが保存され、2 番目のパラメータにはリクエストのステータスが保存されます。

この PHP ファイル (「demo_test_post.php」) は次のようになります:

<?php
    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
    $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
    echo '网站名: ' . $name;
    echo "\n";
    echo 'URL 地址: ' .$city;
?>

$.post() の完全な例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        function checkname(){
            if($('#name').val() == ""){
                $('#msg').html("please enter the name!");
                $('#name').focus;
                return false;
            }
            if($('#address').val() == ""){
                $('#msg').html("please enter the address!");
                $('#address').focus;
                return false;
            }
            ajax_post();
        }
        function ajax_post(){
            $.post("text.php",{name:$('#name').val(),address:$('#address').val()},
                    function(data){
                        //$('#msg').html("please enter the name!");
                        //alert(data);
                        $('#msg').html(data);
                    },
                    "text");
        }
    </script>
</head>
<body>
    <form id="ajaxform" name="ajaxform" method="post" action="text.php">
        <p>
            name<input type="text" name="name" id="name"/>
        </p>
        <p>
            address<input type="text" name="address" id="address"/>
        </p>
        <p id="msg"></p>
        <p>
            <input name="Submit" type="button" value="submit" onclick="return checkname()"/>
        </p>
    </form>
</body>
</html>

text.php ファイルを作成します:

<?php
    $name = $_POST["name"];
    $address = $_POST["address"];
    echo $name."<br>";
    echo $address."<br>";
    echo "success";
?>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> function checkname(){ if($('#name').val() == ""){ $('#msg').html("please enter the name!"); $('#name').focus; return false; } if($('#address').val() == ""){ $('#msg').html("please enter the address!"); $('#address').focus; return false; } ajax_post(); } function ajax_post(){ $.post("text.php",{name:$('#name').val(),address:$('#address').val()}, function(data){ //$('#msg').html("please enter the name!"); //alert(data); $('#msg').html(data); }, "text"); } </script> </head> <body> <form id="ajaxform" name="ajaxform" method="post" action="text.php"> <p> name<input type="text" name="name" id="name"/> </p> <p> address<input type="text" name="address" id="address"/> </p> <p id="msg"></p> <p> <input name="Submit" type="button" value="submit" onclick="return checkname()"/> </p> </form> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear