JQuery

[JQuery-Ajax] .load()를 통한 Ajax 이용

붉은양말 2015. 10. 29. 17:08
반응형



<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
 
<script>
$( "#success" ).load( "/not-here.php", function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});
</script>
 
</body>
</html>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>load demo</title>
  <style>
  body {
    font-size: 12px;
    font-family: Arial;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="success"></div>

<script>
$( "#success" ).load( "aaa.php", function( response, status, xhr ) {});
</script>
 
</body>
</html>


GET 방식

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
 $(‘#btn’).click(function(){
                $.get('a.jsp', {'param1' : '파라미터내용1', 'param2' : '파라미터내용2'}, function(data){
                    $(‘#ajaxDiv’).load(‘sub/aaa.html’);
                });
  return false;
 }); 
});

POST 방식

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
$(document).ready(function(){
 $(‘#btn’).click(function(){
                $.post('a.jsp', {'param1' : '파라미터내용1', 'param2' : '파라미터내용2'}, function(data){
                    $('#ajaxDiv').load('sub/aaa.html');
                });
  return false;
 }); 
});

a.jsp?param1=파라미터내용1¶m2=파라미터내용2 형식으로 호출됨

반응형
저작자표시 (새창열림)