PHP
[PHP] 유용한 실무팁 8 - Ajax, Json 형태로 연동하기
http://portfolio.wonpaper.net
2024. 7. 2. 22:07
[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
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 |