[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기

2017. 2. 16. 10:22

Scenario: Ajax를 이용하여, 특정 Html 요소 불러오기 그 Html 파일내에 특정 태그 요소만 불러오고자 함

Solutions: 제일 고민됬던 부분.1. $.ajax를 써서 어떻게 <li> 태그요소만 불러올것인가?? 나는 ajax name:value를 뒤져봤는데 아무리봐도 나오지 않았다.

결국 jquery 메소드를 통해 해결 할 수 있엇다.

총 소스는 (아래)

<Main.html>

<head>
<meta charset="UTF-8">
<title>서버의 데이터를 대상 엘리먼트에 삽입하기</title>
<style>
div {
width: 200px;
height: 80px;
margin: 3px;
float: left;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#menu1").click(function() {
$.ajax({
url : "menu.html",
success : function(result) {
$("#message1").html(result);
}
});
});
});
$(document).ready(function() {
$("#menu2").click(function() {
$.ajax({
url : "menu.html",
success : function(result) {
var refine = $("#message2").html(result).find('li');
console.log(result);
console.log(refine);
console.log(typeof(refine));
$('#message2').html(refine);
}
});
});
});
</script>
</head>
<body>
<div>
<a href="#" id="menu1">메뉴 보기 1</a>
<p>
<span id="message1"></span>
</div>
<div>
<a href="#" id="menu2">메뉴 보기 2</a>
<p>
<span id="message2"></span>
</div>
</body>
</html>

<menu.html> : main 에서 불러올 html 파일

[Jquery] 동적으로 Iframe 간 반응하기, 로그인 연습 (0)	2017.03.07
[Json,Ajax] 제이선 파일에서 ajax 및 getJson 메소드를 써서 데이터 로드하기 (0)	2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기 (0)	2017.02.14
[jQuery]공부했던 기본 셀렉터 예제 모음 (0)	2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기 (0)	2017.02.09

안 평범한 개발자의 하루