jQuery-非同期関数Ajax②.ajax
10628 ワード
2. Low-Level Interface - jQuery.ajax( url [, settings ] )
-url:URLを呼び出します.GET方式であればURLの後ろにパラメータを付けて使用できます.
(例えばurl:「ajaxData.jsp?type=1」)
-data:サーバへのデータ転送用
-dataType:サーバ側が転送するデータを指定し、フォーマットのデータを説明します.
値はxml、json、script、htmlです.フォーマットを指定しない場合、jQueryは自分で判断します.
-success:成功時に呼び出されるコールバックを指定
-Function( PlainObject data, String textStatus, jqXHR jqXHR )
-type:データの転送方法を指定します.get、postを使用できます.
簡単な例を見てみましょう.
使用するEx 02 Server menu.html
<meta charset="UTF-8">
<div>
<p>중식메뉴</p>
<ul>
<li>짜장면</li>
<li>짬뽕</li>
<li>탕수육</li>
<li>깐풍기</li>
</ul>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Jquery 필수 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//message 아이디를 갖고있는 요소 클릭 시
$('#message').click(function() {
$.ajax(
{
url : "Ex02_Server_menu.html",
dataType : "html",
success : function(responsedata) {
//responsedata : 함수의 파라미터로 서버가 준 값을 받아올 수 있다.
console.log(responsedata);
$('#menudiv').html($(responsedata).find('li'));
}
}
);
});
});
</script>
</head>
<body>
<div id="menudiv">
<a href="#" id="menu1"></a>
</div>
<span id="message">클릭하세요</span>
</body>
</html>
*.html()関数
①.html():html()選択した要素内のコンテンツを取得するか、他のコンテンツに置き換えます.
let jb = $( 'h1' ).html();
/*h1 요소의 내용을 변수 jb에 저장*/$( 'div' ).html( '<h1>Lorem</h1>' );
/*div 요소의 내용을 <h1>Lorem</h1>로 바꾼다*/Reference
この問題について(jQuery-非同期関数Ajax②.ajax), 我々は、より多くの情報をここで見つけました https://velog.io/@dearlee/jQuery-비동기-함수-Ajaxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol