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

이재용
Commit 4cc00e70893ef6f71646b7b4560f43071f494d65 4cc00e70 1 parent aa998ff8
Showing 1 changed file with 28 additions and 8 deletions
TFT_My_Galaxy/views/main.ejs
--- a/TFT_My_Galaxy/views/main.ejs
View file @4cc00e7
+++ b/TFT_My_Galaxy/views/main.ejs
View file @4cc00e7
@@ -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(){
+        function setEvent() {
-
+            $("#searchButton").click(function(){
-
-      $("button#searchButton").click(function(){
             var name = $("input").val();
-        location.href = "http://localhost:3000/search/" + name;
+            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>