2017-05-10 1 views
0

나는 취미로 새로운 기술을 배우려고 노력하고 있으며, 많은 것을 배웠지 만 여전히 혼란 스러울 것들이 있습니다.Ruby를 통해 MongoDB에 HTML 폼

저는 MongoDB에 DB = phone을 설정하고 collection = records 디렉토리에 전화 디렉토리를 저장하는 것으로 추측 할 수 있습니다. 나는 JSON 파일을 만들고 모든 것을 가져 왔고 모두 잘 돌아갔다.

그런 다음 Ruby/Sinatra 앱을 만들어 테이블에 데이터를 표시했습니다. 그것은 모두 잘 작동합니다.

이제 HTML 양식을 사용하여 새 사용자를 데이터베이스에 제출하려고합니다. 테스트에 대한 나의 기본적인 형태는 다음과 내가 AJAX를 통해이 일을하려고 이후

<form id="form"> 
    First name:<br> 
    <input type="text" name="fname" value="Mickey"> 
    <br> Last name:<br> 
    <input type="text" name="lname" value="Mouse"> 
    <br><br> 
    <input type="submit" value="Submit" id="commit"> 
    </form> 
    <script> 

(나는, 동작을 = ""탈락 한 myTest.html

로시나 공공 디렉토리에있는대로이지만, 이것은 내 AJAX 시도했다) 작동하지 않았다 :

get '/myTest' do 
result = Record.collection.insert_one({ :fname =>"Justin"}) 
end 

나는이 작동하는지 확인한 내 루비 파일에서

<script> 
    $(function() { 
     $.ajax({ 
     url: 'http://localhost:4567/api/v1/myTest', 
     type: 'post', 
     dataType: 'json', 
     jsonp: 'json', // mongod is expecting the parameter name to be called "jsonp" 
     success: function(data) { 
      //console.log('success', data); 
      console.log("Success"); 
     }, 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      console.log('error', errorThrown); 

     } 
     }); 
    }); 

, phone.rb, 나는이 있습니다. 내가 연결되어 붙어입니다

두 (또는 심지어해야합니까?) 나는이 양식에 제출 버튼을 클릭하면, 나는이 같은 URL 인코딩 된 문자열 수 :

localhost:4567/myTest.html?fname=Justin&lname=Smith 

어떻게 할을 양식에서 URL 데이터를 가져 와서 Mongo에 새 문서로 삽입 하시겠습니까?

나는 2 일 동안 답을 찾고 있지만 웹의 거의 모든 정보가 레일즈로 돌아와서 사용하지 않는다. Ruby에서 모든 것을 처음부터 배우고 싶습니다. Javascript 측면에서 문제를 볼 때 사실상 모든 참조가 Node.js를 가리키고 있는데, 사용하지 않습니다.

도움이 필요하거나 적어도 올바른 방향으로 끄덕임을 보내주십시오. 감사

UPDATE 내가 분명히 내 루비의 실수를 - 그것은 POST해야합니다. 그래서 새로운 루비 블록을 만들어, 내가 브라우저에서 직접 액세스 및/API/V1/MYTEST?에 fname = 미키 로컬 호스트 & LNAME = 마우스를 입력 할 때, 데이터베이스에 정보를 입력

post '/myTest' do 
fname = params[:fname] 
    lname = params[:lname] 
    Record.collection.insert_one({'fname' => fname, 'lname' => lname}) 
end 

에 양식, 나는 다음을 추가하려고했습니다 :

<form id="form" method="POST" action="/myTest"> 
    First name:<br> 
    <input type="text" name="fname"> 
    <br> Last name:<br> 
    <input type="text" name="lname"> 
    <br><br> 
    <input type="submit" value="Submit" id="commit"> 
    </form> 
<script> 
    $(function() { 
     //hang on event of form with id=myform 
     $("#form").submit(function(e) { 

     //prevent Default functionality 
     e.preventDefault(); 

     //get the action-url of the form 
     var actionurl = '/myTest'; 


     $.ajax({ 
      url: actionurl, 
      type: 'post', 
      dataType: 'application/json', 
      data: $("#form").serialize(), 
      success: function(data) { 
      console.log('success') 
      } 
     }); 

     }); 

    }); 
    </script> 

나는 루비/myTest을 칠 수 없다. 나는 계속 "Sinatra는이 Ditty를 모릅니다."404. Sinatra를 사용하여 Views 폴더에서 HTML을 erb로 만들지는 않겠습니까? 내 페이지는 공용 폴더에 있으며 Sinatra와는 별도로 작성됩니다.

답변

1

먼저 자바 스크립트 코드에서 양식 데이터 (예 : & 성 (jQuery $ajax docs 참조))를 전송하지 않습니다. 둘째, Sinatra 앱이 GET 엔드 ​​포인트를 정의하는 동안 POST 요청을 보내려고합니다.Sinatra 응용 프로그램이 HTML 양식에서 보낸 정확한 데이터를 수신하면 MongoDB에서 쉽게 새 레코드를 만들 수 있습니다. mongo-ruby-driver

+0

감사합니다. 정확합니다. Ruby를 POST로 업데이트했습니다. 하지만 양식을 제출할 때 Sinatra에서 404 오류가 계속 발생합니다. – user2843365

+0

흠, 알 겠어. URL이 정확한지 확인 했습니까? 'http : // localhost : 3000/api/v1/myTest'와 같이 Sinatra 엔드 포인트의 전체 경로를'actionurl' 변수에 할당 할 수 있습니다. 엔드 포인트가 예를 들어 작동 중인지 확인할 수도 있습니다. 우체부 또는 컬. – xlts

+0

전체 URL을 사용하려고했지만 작동하지 않았습니다. 나는 그것을 어떻게하는지 모르기 때문에 컬을 연구해야 할 것입니다. 팁 고마워! – user2843365

0

문제가있었습니다. action = "/ myTest"형태로 보면 "api/v1/myTest"가되어야합니다. 내가 그것을 바꿨을 때, 그것은 일하기 시작했다.

시간을내어 도와 주셔서 감사합니다. 고맙습니다!