이재용

ajax 사용으로 속도 개선, 출력 형식 변경

......@@ -3,34 +3,54 @@
<head>
<meta charset="utf-8">
<title><%= title %></title>
<link rel="icon" href = "FindMelogo.png">
<link rel="icon" href = "DUDUDUNGA.PNG">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style>
<script>
$(document).ready(function(){
$("button#searchButton").click(function(){
var name = $("input").val();
location.href = "http://localhost:3000/search/" + name;
})
});
function setEvent() {
$("#searchButton").click(function(){
var name = $("input").val();
getUserInfo(name);
})
}
function getUserInfo(name) {
var _this = this;
$.ajax({
method : 'GET',
async : false,
url : '/api/search/'+name
}).done(function(result){
_this.renderData(result);
});
}
function renderData(data) {
console.log(data)
$('#resultData').html('');
$.each(data,function(){
var liEl = "<li>" + this + "</li>";
$("#resultData").append(liEl);
});
}
$(document).ready(function(){
setEvent();
});
</script>
</head>
<body>
<div class="imgOpacity">
<div class="center">
<img src= "FindMelogo.png" width = 300, height = 300/>
<img src= "DUDUDUNGA.PNG" width = 300, height = 300/>
</div>
<div class="center2">
<input type="text" class="input_text" placeholder="소환사 이름">
<span class="input-group-btn">
<button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">click!</button>
<button id="searchButton" class="btn btn-primary" type="button">click!</button>
</span>
</div>
<ul id="resultData" style="margin-top:100px"></ul>
</div>
</body>
</html>
......