개발자의 끄적끄적

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

개발/javascript & jquery

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

효벨 2020. 6. 26. 01:00
728x90
반응형

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

 

 

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

 

Solutions: 제일 고민됬던 부분.1. $.ajax를 써서 어떻게

 

  • 태그요소만 불러올것인가?? 나는 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 파일

<meta charset="UTF-8">

<p> 중 식 메 뉴 </p>
<ul>
<li> 짜장면 </li>
<li> 짬뽕 </li>
<li> 기스면 </li>
<li> 탕수육 </li>
</ul>
<p> 메뉴를 골라주세요.</p>

 

출처 : https://unordinarydays.tistory.com/90

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[javascript] alert library 유용한 alert 창 라이브러리 alert창에 url제거 [펌]  (0) 2020.07.06
[ajax] 로그인 기능 Ajax 예제  (0) 2020.06.26
[javascript] swiper 예제  (0) 2020.06.17
[JavaScript] $(document).on과 $(document).ready의 차이  (0) 2020.06.15
[제이쿼리/jQuery] 요소 갯수 구하기 .length  (0) 2020.06.15
'개발/javascript & jquery' Related Articles more
Comments