js015.html ํ์ผ์ ์์ฑํ๊ณ ์๋ ์ฝ๋๋ฅผ ๋ถ์ฌ๋ฃ์.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>Card title</h5>
<p>๊ฐ๊ฒฉ : 70000</p>
</div>
</div>
</div>
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
</script>
</body>
</html>
โจ ์ค์ต. <div class="row"> ์๋์ div ๋ฅผ ์ ๊ฑฐํ๊ณ script๋ก products์ ๊ฐฏ์๋งํผ card ์์ฑ
์ ๋ฐ ์ง์ ์ง๋ณด๊ธฐ ๐คฃ
products.forEach(function (item,index){
$('.row').append(`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${item.title}</h5>
<p>๊ฐ๊ฒฉ : ${item.price}</p>
</div>`)
});
โจ ์ค์ต. ์ํ๋๋ณด๊ธฐ ๋ฒํผ ๋๋ฅด๋ฉด Ajax ๋ก ๋ฐ์ดํฐ ๊ฐ์ ธ์์ ์ฝ์์ฐฝ์ ์ถ๋ ฅ
๋ฐ์ดํฐ ๊ฐ์ ธ์ฌ ์๋ฒ๋ ์๋ URL ์ฌ์ฉ
https://gist.githubusercontent.com/leeanJP/3ee931feb393f95895bd652344d1bf13/raw/d255a58907156433ef61de8401bf16564df4407f/more1.json
๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ฅผ ํ์ธํด๋ณด๋ฉด json ํํ๊ฐ ์๋ string์ผ๋ก ๋ฐ์์จ๋ค.
์ด๋ด๋๋ JSON.parse(string) ํจ์๋ก string > json ํ๋ณํ์ ํ ์ ์๋ค.
(์ด์ ์ parseInt parseFloat ํจ์ ์ฒ๋ผ ํ๋ณํ์ ์ํด ์ฌ์ฉํ๋ ๊ฒ)
$('#more').on('click',function (){
$.get('https://gist.githubusercontent.com/leeanJP/3ee931feb393f95895bd652344d1bf13/raw/b65cef1db551c3815352418ca885fb0ff38684d5/more1.json')
.done(function (result) {
console.log(typeof result);
console.log(result);
var jsonData = JSON.parse(result)
console.log(typeof jsonData);
console.log(jsonData);
}).fail(function (){
console.log("์๋ฌ ๋ฐ์");
})
})
โจ ์ค์ต. ์์์ ๊ฐ์ ธ์จ ๋ฐ์ดํฐ๋ก ์นด๋ 3๊ฐ ๋ง๋ค๊ธฐ
jsonData.forEach(function (item){
$('.row').append(`<div class="col-sm-4">
<img src="https://via.placeholder.com/600" class="w-100">
<h5>${item.title}</h5>
<p>๊ฐ๊ฒฉ : ${item.price}</p>
</div>`)
})
์ง๊ธ์ ์๋ฒ์ DB๊ฐ ๋ฐ๋ก ์์ด์ ์ด๋ฐ์์ผ๋ก ๊ตฌํ ํ์ง๋ง ๋์ค์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ java Spring
๊น์ง ๋ฐฐ์ฐ๊ณ ๋๋ฉด ๋ด PC์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ๋ง๋ค๊ณ ์๋ฒ ํ๋ก๊ทธ๋จ์ ๊ตฌํํด์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐฉ์์ผ๋ก ํ๋ก๊ทธ๋จ์ ์ง๊ฒ ๋ ๊ฒ์.
๊ทธ๋ ๊ฒ ํ๋ฉด ์ด ๋ฐ์ดํฐ์ ๊ฐฏ์๋ฅผ ๊ตฌํ๊ณ , ์ฒ์์๋ 0๋ฒ๋ถํฐ 19๋ฒ๊น์ง 20๊ฐ๋ง ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ์ํ๋๋ณด๊ธฐ๋ฅผ ํด๋ฆญํ๋ฉด ์ํ๋๋ณด๊ธฐ ๋ฒํผ์ ํด๋ฆญํ ํ์๋ฅผ ๊ธฐ์ต ํ๋ค๊ฐ 20๋ฒ๋ถํฐ 39๋ฒ๊น์ง์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ณ ๋ง์ง๋ง์ ๊ฐ์๋ ์ํ ๋๋ณด๊ธฐ ๋ฒํผ์ ์จ๊ธฐ๋ ์์ผ๋ก ๊ตฌํํ ์ ์๋ค.
์ด๊ฒ ์ฐ๋ฆฌ๊ฐ ๋ณด๋ ์ผํ๋ชฐ์ 20๊ฐ์ฉ ์ํ๋ณด๋ ํ์ด์ง์ ์๋๋ฐฉ์
20๊ฐ์ฉ ๋ณด๊ธฐ > 50๊ฐ์ฉ ๋ณด๊ธฐ๋ก ๋ณ๊ฒฝํ๋ฉด ๊ฐ์ ธ์ค๋ ๋ฐ์ดํฐ ๊ฐฏ์๋ง ๋ณ๊ฒฝํ๊ณ ์๋ํ๋ ๋ฐฉ์์ ๊ฐ๋ค.
ํ์
์์ ์ฌ์ฉํ๋ Ajax ์ฝ๋ ์์ 1
$.ajax({
type : 'post', // ํ์
(get, post, put ๋ฑ๋ฑ)
url : '/test', // ์์ฒญํ ์๋ฒurl
async : true, // ๋น๋๊ธฐํ ์ฌ๋ถ (default : true)
headers : { // Http header
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "POST"
},
dataType : 'text', // ๋ฐ์ดํฐ ํ์
(html, xml, json, text ๋ฑ๋ฑ)
data : JSON.stringify({ // ๋ณด๋ผ ๋ฐ์ดํฐ (Object , String, Array)
"no" : no,
"name" : name,
"nick" : nick
}),
success : function(result) { // ๊ฒฐ๊ณผ ์ฑ๊ณต ์ฝ๋ฐฑํจ์
console.log(result);
},
error : function(request, status, error) { // ๊ฒฐ๊ณผ ์๋ฌ ์ฝ๋ฐฑํจ์
console.log(error)
}
})
ํ์
์์ ์ฌ์ฉํ๋ Ajax ์ฝ๋ ์์ 2
var httpFileUpload = {
getAddr : function(fileElement, callback){
const file = fileElement[0];
if(!file){
throw new Error("file Element is required");
} else {
const uploadFile = file.files[0];
if(!uploadFile || !uploadFile.size || !uploadFile.name || uploadFile.size === 0){
throw new Error("upload file is required");
} else {
console.log("file size : " + uploadFile.size+"\nfile name : " + uploadFile.name);
var params = {
filename : uploadFile.name,
filesize : uploadFile.size,
provider : "TEST"
};
$.ajax({
type : "POST",
url : "/sample.do",
contentType: "application/json",
dataType:"json",
data : JSON.stringify(params)
})
.done(function (data, textStatus, xhr) {
console.log(xhr);
if(data.result_cd == "1"){
alert("success!");
} else {
alert("์๋ฌ๋ฐ์["+data.result_cd+"]");
console.log(data.result_msg);
callback(data);
}
})
.fail(function(data, textStatus, errorThrown){
console.log("fail in get addr");
callback(data);
});
}
}
}
}