jQuery - AJAX 로드() 메소드

jQuery load() 메서드

load() 메서드는 서버에서 데이터를 로드하고 반환된 데이터를 선택한 요소에 넣습니다.

구문:

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

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

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

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

다음은 샘플 파일("demo_test.txt")의 내용입니다.

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

"demo_test.txt" 파일의 내용을 지정된 <div> 요소에 로드합니다.

<!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(){
         $("#div1").load("/try/ajax/demo_test.txt");
    });
});
</script>
</head>
<body>
    <div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
    <button>获取外部内容</button>
</body>
</html>

다음을 사용할 수도 있습니다. jQuery 선택기 URL 매개변수에 추가

이 예에서는 "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 - 호출 상태를 포함합니다.

xhr - XMLHttpRequest 객체를 포함합니다.

다음 예에서는 호출 후 프롬프트를 표시합니다. load() 메소드가 완성되었습니다. load() 메서드가 성공하면 "외부 콘텐츠가 성공적으로 로드되었습니다!"가 표시되고, 실패하면 다음과 같은 오류 메시지가 표시됩니다. text 먼저.html 파일:

<!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",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>
    <div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
    <button>获取外部内容</button>
</body>
</html>

다른 HTML 파일을 만들고(이름은 원하는 대로 선택할 수 있음) jQuery AJAX load() 메서드를 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
  </head>
  <body>
      <div class="comment">
        已有评论：
      </div>
      <div class="comment">
        <h6>张三：</h6>
        <p class="para">沙发。</p>
      </div>
      <div class="comment">
        <h6>李四：</h6>
        <p class="para">板凳。</p>
      </div>
      <div class="comment">
        <h6>王五：</h6>
        <p class="para">地板。</p>
      </div>
  </body>
</html>

지속적인 학습

||

새로운 파일

<!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"> $(document).ready(function(){ $("#send").click(function(){ $("#resText").load("text.html"); //引入text.html文件。 }); }); </script> </head> <body> <input type="button" id="send" value="Ajax获取" /> <div id="resText"></div> </body> </html>

제출하다 코드 재설정
자동운전