- ajax 요청 추가

- api에 대한 응답 수정
jaeyoung0826 · Jun 28, 2020 · 2bff9ce · 2bff9ce
1 parent 884df33
commit 2bff9ce
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 17 deletions.
diff --git a/RUTROLL/router/main.js b/RUTROLL/router/main.js
@@ -6,12 +6,12 @@ app.get('/', function(req, res) {
   res.render('main', { title: 'R U TROLL?' });
 });
 
-app.get('/search/:username/', function(req, res){
-  var name=req.params.username
-  user.userInfo(name)
-
-
-   
+app.get('/api/search/:username/', function(req, res){
+  var name=req.params.username;
+  user.userInfo(name,function(result){
+      console.log(result);
+      res.json(result);
+  });
 });
 
 module.exports=app;
diff --git a/RUTROLL/user/userinfo.js b/RUTROLL/user/userinfo.js
@@ -4,7 +4,7 @@ var urlencode=require("urlencode");
 const search = require('../api/api');
 var local_puuid;
 var need_data;
-result.userInfo = function(name) {
+result.userInfo = function(name,callback) {
     var encode_name=urlencode(name)
     searchGameInfo.getPuuid(encode_name).then(puuid => {
         local_puuid=puuid
@@ -84,7 +84,29 @@ result.userInfo = function(name) {
             b=key+" 승률: 0  판 수: (0/"+all_map_count[key]+")"
             result.push(b)
         }
-        console.log(result)
+
+        /*
+        *  result에 담을 데이터를 json형식으로 담는게 좋을거 같네요.
+        *
+        *  var result = {
+        *       [
+        *           {
+        *               'map' : 'TFT3_GameVariation_Bonanza',
+        *               'winRate' : '100%',
+        *               'gameCount' : '1/3'
+        *           },
+        *           {
+        *               'map' : 'TFT3_GameVariation_Bonanza',
+        *               'winRate' : '100%',
+        *               'gameCount' : '1/3'
+        *           },
+        *       ]
+        *   }
+        *
+        *
+        * */
+
+        callback(result);
     });
 
 };

diff --git a/RUTROLL/views/main.ejs b/RUTROLL/views/main.ejs
@@ -10,14 +10,28 @@
     <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 : 'http://localhost:3000/api/search/'+name
+            }).done(function(result){
+                _this.renderData(result);
+            });
+        }
+        function renderData(data) {
+            console.log(data)
+        }
+        $(document).ready(function(){
+            setEvent();
+        });
     </script>
   </head>
   <body>
@@ -28,7 +42,7 @@
     <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>
   </div>