jQuery - AJAX g...LOGIN

jQuery - AJAX get() 및 post() 메소드

HTTP 요청: GET 대 POST

클라이언트 및 서버 측 요청-응답의 두 가지 일반적인 방법은 GET 및 POST입니다.

GET - 지정된 리소스에서 데이터 요청 POST - 처리할 데이터를 지정된 리소스에 제출

GET은 기본적으로 서버에서 데이터를 가져오는(검색) 데 사용됩니다. 참고: GET 메서드는 캐시된 데이터를 반환할 수 있습니다.

POST를 사용하여 서버에서 데이터를 가져올 수도 있습니다. 그러나 POST 메서드는 데이터를 캐시하지 않으며 요청과 함께 데이터를 보내는 데 자주 사용됩니다.


Get과 Post의 차이점

Get 메서드:
간단한 데이터는 get 메서드를 사용하여 전송할 수 있지만 일반적으로 크기가 1KB로 제한됩니다. 데이터는 URL에 추가되어 전송됩니다. (HTTP 헤더 전송) 즉, 브라우저는 각 양식 필드 요소와 해당 데이터를 URL 매개변수 형식으로 요청 라인의 리소스 경로에 추가합니다. 가장 중요한 점은 클라이언트의 브라우저에 캐시되어 다른 사람들이 브라우저 기록에서 계좌 번호, 비밀번호 등과 같은 고객의 데이터를 읽을 수 있다는 것입니다. 따라서 어떤 경우에는 get 메소드가 심각한 보안 문제를 일으킬 수 있습니다.

Post 메서드:
POST 메서드를 사용할 때 브라우저는 각 양식 필드 요소와 해당 데이터를 URL 주소의 매개 변수로 전달하는 대신 HTTP 메시지의 엔터티 콘텐츠로 웹 서버에 보냅니다. . 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")입니다.

두 번째 매개변수는 콜백 함수입니다. 첫 번째 콜백 매개변수는 요청된 페이지의 내용을 저장하고, 두 번째 콜백 매개변수는 요청 상태를 저장합니다.

이 PHP 파일("demo_test.php")은 다음과 같습니다:

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


$.post() 메소드

$.post() 메소드는 HTTP POST를 통해 서버에서 데이터를 요청합니다. 요구 .

구문:

$.post(URL,data,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(){
            $.post("/try/ajax/demo_test_post.php",{
            name:"php中文网",
            url:"http://www.php.cn"
            },
            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 스크립트는 이러한 매개변수를 읽고 처리한 후 결과를 반환합니다.

세 번째 매개변수는 콜백 함수입니다. 첫 번째 콜백 매개변수는 요청된 페이지의 내용을 저장하고, 두 번째 매개변수는 요청 상태를 저장합니다.

이 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>
코스웨어