내 블로그 목록

2018년 6월 7일 목요일

[Nodejs] Localhost:8888 연결 응용


Localhost:8888 연결 응용 

0. javascript 파일에서 코드 작성


1. javascript 파일에서 [Ctrl+`]로 터미널 호출 후 연결 
ctrl+` >
C:\>cd "Program Files"
C:\Program Files>cd nodejs
C:\Program Files\nodejs>node C:\firstnode.js   
***참고로 'C:\firstnode.js '는 파일 경로 
















2. 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <title>Document</title>
</head>
<body>
    Ajax Test
    <button id="btn">getData()</button>
    <select name="" id=""></select>
    <script>
        var dataArr = [];
        var put = document.querySelector('select');
 
        $(document).ready(function(){
            $('#btn').click(function(){   //버튼을 클릭하면 function실행 
               $.ajax({  
                   url:"http://localhost:8888"
               }).success(function(data){   //성공하면 
                
                // 0.select에 data넣기_createElement, createTextNode, appendChild 사용
                //    dataArr = data.split(",");
 
                //    for(var i=0; i<dataArr.length; i++){
                //     var sport = document.createElement("option");
                //     var sportlist = document.createTextNode(dataArr[i]);
                //     sport.appendChild(sportlist);
                //     document.querySelector("select").appendChild(sport);
                //    }
 
                // 1.select에 data넣기_innerHTML 사용 
                dataArr=data.split(",");
                for(var i=0; i<dataArr.length; i++){
                    put.innerHTML+="<option>"+dataArr[i]+"</option>";
                } 
               });
            })
        })
    </script>
</body>
</html>
cs

3. 결과 

댓글 없음:

댓글 쓰기