Notice
Recent Posts
Recent Comments
Tags more
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[PHP] 유용한 실무팁 8 - Ajax, Json 형태로 연동하기 본문

PHP

[PHP] 유용한 실무팁 8 - Ajax, Json 형태로 연동하기

http://portfolio.wonpaper.net 2024. 7. 2. 22:07

 

[PHP] Ajax JSON 형태로 DB내의 데이터값 불러오기

 

[PHP] Ajax JSON 형태로 DB내의 데이터값 불러오기

실무에서 아주 아주 접하는 부분이다. 꼭 익혀두길 바란다. [ html ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

wonpaper.tistory.com

 

 

일전에 관련 포스팅 글을 올렸는데, 이번에도 잠깐 하나 더 올려보았다.

 

[ html 페이지 ]

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>Ajax, Json 연동</title>
 </head>
 <body>
  
<div id="md_name">이름</div>
<div id="md_name2">이름2</div>
 
<div><img id="md_img" src="/img_240626/planner/profile/leesumin.png" alt=""></div>
 
<div id="md_comment">코멘트</div>
<div id="md_instagram">인스타그램</div>
<div id="md_review1">리뷰내용1</div>
<div id="md_review2">리뷰내용2</div>
    
 
<a href="#none" onclick="mView('홍길동')">자세히보기</a>
<a href="#none" onclick="mView('이순신')">자세히보기</a>
 
<script>
function mView(name) {
 
    if (name != "")
    {
        $.ajax({
            type: "post",
            url: "ajax_index.php",
            data: {
                name : name
            },
            dataType: "json",
            success: function(obj,status,xhr) {
                //var data = JSON.parse(obj);
            
                if (obj != null)
                {
                    $("#md_name").html(obj.name);
                    $("#md_name2").html(obj.name);
                    $("#md_img").attr("src", obj.img);
                    $("#md_comment").html(obj.comment);
                    $("#md_instagram").html(obj.insta);
                    $("#md_review1").html(obj.review1);
                    $("#md_review2").html(obj.review2);
                }
 
            },
            error: function(xhr,status,error) {
                alert("처리중 에러가 발생하였습니다.\n\n잠시 후 다시 시도해 주십시오.");
            }
        });    
    }
 
}
</script>
 
 </body>
</html>
 
 cs

 

 

[ ajax_index.php ]

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<?
header('Content-Type: text/html; charset=UTF-8');
include 'config/db_conn.php';
 
$name = trim($_POST['name']);
 
 
$arr = array(
    array(    "name"=> "홍길동", 
            "img" => "/img_240626/planner/profile/a1.png",
            "comment" => "여러분의 특별한 순간을 함께하게 되어 기쁩니다.",
            "insta" => "<div class=\"swiper-slide\"><a href=\"https://www.instagram.com/p/1\" target=\"_blank\"></a></div>",
            "review1" => `
                        <div class="planner_modal_top3 con01">
                            <div class="left">
                                <img src="/img_240626/planner_modal_top3_con1.png" alt="">
                            </div>
                            <div class="right">
                                <div class="top">
                                    <p>000님</p>
                                    <div class="star">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-regular fa-star"></i>
                                    </div>
                                </div>
                                <p class="bottom">
                                    플래너님이 오전에 일찍 와주셔서
                                </p>
                            </div>
                        </div>
            `,
            "review2" => '
                        <li>
                            <div class="new">NEW</div>
                            <p class="text">상담 먼저 받으려고 갔는데 플래너님이 엄청 꼼꼼하게 ㅇㅇㅇㅇ</p>
                            <p class="name">000님</p>
                        </li>
                        <li>
                            <div class="new">NEW</div>
                            <p class="text">플래너님이 있어서 너무 든든합니당</p> <p class="name">000님</p>
                        </li>
            '    
    ),
 
    array(    "name"=> "이순신", 
            "img" => "/img_240626/planner/profile/a2.png",
            "comment" => '
                            복잡하고 어렵기만 한 결혼은 No!<br>
                            쉽고 재밌는 맞춤 설계! 즐길 준비 되셨나요~?<br>        
            ',
            "insta" => "<div class=\"swiper-slide\"><a href=\"https://www.instagram.com/p/222\" target=\"_blank\"></a></div>",
            "review1" => `
                        <div class="planner_modal_top3 con01">
                            <div class="left">
                                <img src="/img_240626/planner_modal_top3_con1.png" alt="">
                            </div>
                            <div class="right">
                                <div class="top">
                                    <p>000님</p>
                                    <div class="star">
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-solid fa-star"></i>
                                        <i class="fa-regular fa-star"></i>
                                    </div>
                                </div>
                                <p class="bottom">
                                    플래너님이 오전에 일찍 와주셔서
                                </p>
                            </div>
                        </div>
            `,
            "review2" => '
                        <li>
                            <div class="new">NEW</div>
                            <p class="text">상담 먼저 받으려고 갔는데 플래너님이 엄청 꼼꼼하게 ㅇㅇㅇㅇ</p>
                            <p class="name">000님</p>
                        </li>
                        <li>
                            <div class="new">NEW</div>
                            <p class="text">플래너님이 있어서 너무 든든합니당</p> <p class="name">000님</p>
                        </li>
            '    
    )
);
 
 
if ($name) {
    
    $no = -1;
    for ($i=0;$i<sizeof($arr);$i++) {
        if ($name==$arr[$i]['name']) {
            $no = $i;
            break;
        }
    }
 
    echo json_encode($arr[$no]);
}
?>
 cs

 

 

 

 

 

 

'PHP' 카테고리의 다른 글

[PHP] 실무팁 10 - 코드번호 만들기  (0) 2024.07.09
[PHP] 유용한 실무팁 9 - 휴대폰 본인 인증 작업하기  (0) 2024.07.04
[PHP] 날짜 관련 함수 모음 - 해당 월 첫째날, 마지막날, 몇 주차  (0) 2024.06.25
[PHP] 이름부분에 '*' 형태로 마스킹 처리하기  (0) 2024.06.18
[PHP] 유용한 실무팁 7 - 토글 (toggle) 작업하기  (0) 2024.05.14
'PHP' Related Articles more
Comments