jQuery - AJAX 소개 및 방법

jQuery - AJAX 소개

AJAX란 무엇인가요?

AJAX = 비동기 JavaScript 및 XML.

간단히 말하면 AJAX는 전체 웹 페이지를 다시 로드하지 않고도 백그라운드에서 데이터를 로드하고 웹 페이지에 표시합니다.

jQuery 및 AJAX 정보

jQuery는 AJAX와 관련된 여러 메서드를 제공합니다.

jQuery AJAX 메서드를 사용하면 HTTP Get 및 HTTP Post를 사용하여 원격 서버에서 텍스트, HTML, XML 또는 JSON을 요청할 수 있으며, 이 외부 데이터를 웹 페이지의 선택한 요소에 직접 로드할 수 있습니다.

AJAX 프로그래밍은 jQuery가 없으면 여전히 조금 어렵습니다.

일반 AJAX 코드를 작성하는 것은 브라우저마다 AJAX를 다르게 구현하기 때문에 쉽지 않습니다. 즉, 브라우저를 테스트하려면 추가 코드를 작성해야 합니다. 그러나 jQuery 팀은 AJAX 기능을 구현하는 데 간단한 코드 줄만 있으면 이 문제를 해결했습니다.

AJAX load() 메소드

jquery load() 메소드는 jquery ajax의 non-refresh 메소드 중 하나로 페이지의 내용을 지정된 ID로 직접 로드할 수 있으며, 매개변수를 사용하여 새로 고칠 수도 있습니다. .페이지에서 load()의 몇 가지 사용법과 일반적인 문제를 소개하겠습니다.

구문:

$(selector).load(URL,data,callback);

필수 URL 매개변수는 로드하려는 URL을 지정합니다.

선택적 데이터 매개변수는 요청과 함께 전송될 쿼리 문자열 키/값 쌍 세트를 지정합니다.

선택적인 콜백 매개변수는 load() 메서드가 완료된 후 실행되는 함수의 이름입니다.

예:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=" 
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>

URL 매개변수에 jQuery 선택기를 추가할 수도 있습니다.

다음 예에서는 "demo_test.txt" 파일에서 id="p1"인 요소의 콘텐츠를 지정된 <div> 요소로 로드합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>

선택적 콜백 매개변수는 load() 메서드 이후에 수행할 작업을 지정합니다. 허용된 콜백 함수가 완료되었습니다. 콜백 함수는 다양한 매개변수를 설정할 수 있습니다.

responseTxt - 호출 성공 시 결과 콘텐츠를 포함합니다.

statusTXT - 호출 상태를 포함합니다.

jQuery get() 및 post() 메서드는 서버에서 데이터를 요청하는 데 사용됩니다. HTTP GET 또는 POST 요청을 통해.

HTTP 요청: GET 대 POST클라이언트 및 서버 측 요청-응답의 두 가지 일반적인 방법은 GET 및 POST입니다. GET - 지정된 리소스에서 데이터 요청 POST - 처리할 데이터를 지정된 리소스에 제출

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

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

jQuery $.get() 메소드

$.get() 메소드는 HTTP GET 요청을 통해 서버로부터 데이터를 요청합니다.

구문:

$.get(URL,callback);

필수 URL 매개변수는 요청하려는 URL을 지정합니다.

선택적인 콜백 매개변수는 요청이 성공한 후 실행될 함수의 이름입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>

$.get()의 첫 번째 매개변수는 요청하려는 URL("demo_test.php")입니다.

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

팁: 이 PHP 파일("demo_test.php")은 다음과 유사합니다:

<?php
echo '이것은 PHP 파일에서 읽은 데이터입니다. ';
?>

jQuery $.post() 메소드

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

구문:

$.post(URL,data,callback);

필수 URL 매개변수는 요청하려는 URL을 지정합니다.

선택적인 데이터 매개변수는 요청과 함께 전송될 데이터를 지정합니다.

선택적인 콜백 매개변수는 요청이 성공한 후 실행될 함수의 이름입니다.

다음 예제에서는 $.post()를 사용하여 요청과 함께 데이터를 보냅니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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 스크립트는 이러한 매개변수를 읽고 처리한 후 결과를 반환합니다.

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

팁: 이 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;
?>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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>

제출하다 코드 재설정

자동운전