위대한 개발자
179
2019-09-18 09:42:25
4
349

ajax 노드 서버로 데이터 보내기


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="../style/tablesheets.css">
</head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- 제이쿼리 -->
<script>
    var html = "";//1. 선언


    $(document).ready(() => {//바로 시작
        init();
    });
    init = () => {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "http://localhost:3000/db/1",
            success: (data=> {
                $.each(data[0], (indexvalue=> {
                //     // console.log(data[0].Page1);
                    html += '<div id="testA">';
                    for (let index = 0index < data[0].Page1.lengthindex++) {
                        html += '<div class = "first">';
                        html += '<h1>' + data[0].Page1[index].main +'</h1>';
                        html += '<h2>' + data[0].Page1[index].sub + '</h2>';
                        html += '<div>Action</div>';
                        html += '<div>' + data[0].Page1[index].act + '</div>';
                        html += '<div>Expected Result</div>';
                        html += '<div>' + data[0].Page1[index].expect + '</div>';
                        html += '<div>Result</div>';
                        html += '<div>' + data[0].Page1[index].is + '</div>';
                        html += '<div>Comment</div>';
                        html += '<div>' + data[0].Page1[index].text + '</div>';
                        html += '<div>' + data[0].Page1[index]._img + '</div>';
                        html += '<br>'
                        html += '</div>';
                    }
                    html += '</div>';
                });
                document.getElementById("PDF").value = html;//2. 저장
            },
            error: () => { // 로딩 에러
                console.log('ajax 연결 에러');
            }
        });
    }
    const SendTEST = () => 
    {
        document.getElementById('fristform').submit();
    };
</script>
<body>
    <div id = "testsubmit">
        <form action="http://localhost:3000/pdfbox/" id="fristform" method='POST'><!--폼 저장 -->
            <input id='PDF' name='PDF' readonly>
            <div onclick="SendTEST()">버튼</div>
        </form>
    </div>
</body>
</html>


버튼을 클릭하면 데이터가 node서버에서 req.body.PDF로 데이터를 받을 수가 있는데, 버튼 클릭없이 html 파일 열면 바로 서버에서 req.body.PDF를 사용할 수 있도록 하고 싶은데 어떻게 해야하나요???

버튼 클릭없이 데이터가 바로 서버로 넘어가게 하고 싶습니다.


0
  • 답변 4

  • 드리데이
    280
    2019-09-18 11:02:39

    해답은 소스에 이미 있네요 


    document ready 에 init => 무슨역할인지는 모르겠지만 기능상 무언가 데이터 초기화 같으니깐요 ...

    async false 주셔서 init 끝나고 실행을 하시거나 또는 success 나 ajax- done 에 버튼 함수를 넣어보심 않을까요.... 응용이여서요 ..onclick =:> 이벤트 태그 .

    onclick= > SendTEST() => 클릭 하지 않고 document에 넣음되는거죠 ....


  • 위대한 개발자
    179
    2019-09-18 11:23:43

    onclick= > SendTEST() => 클릭 하지 않고 document에 넣음되는거죠 ....

    ->이게 무슨 말인지 잘 모르겠네요 ㅠㅠ

  • 드리데이
    280
    2019-09-18 11:36:32

    SendTest() 함수만 실행하면 되는거 아닐까요~~~  조금 더 검색해보세요 ... 


    쓰는 방법을 잘 모르시는거같아요..


    하시려는게 init으로 html이 다그려지면  버튼클릭을 했을때 SendTest() 함수가 실행되면서 다운로드를 원하시는건데요~~


    SendTest()를 그림 그려진 완료된 후에 실행되면 되는거잖아용~~~ 


    그림 다그려진 후 async:false 주셔서 init() 종료 후 sendTest 실행하시거나 
    async:true => success 나 done이라는 ajax 옵션에 html 붙인 후 SendTest()를 넣으면되지 않나요 


    function a() {

      $.ajax({

        async: true,

        success: function(data) {

         // HTML 붙이기 완료 후 실행

          download();

       }

      })

    }

    // 다운로드(SendTest 같은거 .)

    function download() {

       구현

    }

    $(document).ready(function() {
      a();
    });

  • 위대한 개발자
    179
    2019-09-18 11:40:11

    감사합니다


  • 로그인을 하시면 답변을 등록할 수 있습니다.