2017-02-25 3 views
-2

나는 이것을 이해할 수 없다. 나는 몇 사람에게 물어 봤고 우린 곤란하다. 나는 보통 AJAX를 사용하지 않지만이 경우에는 꼭해야만한다고 느낍니다.AJAX로 POST하는 방법

다른 사람이 나와 함께 할 수 있을까요?

<!DOCTYPE> 
<html> 
    <body> 
    <center> 
    <br> 
    <br> 
    <br> 
    <form> 
    Tell your device what to do!<br> 
    <br> 
    <input type="radio" name="arg" value="on">Turn the LED on.</input> 
    <br> 
    <input type="radio" name="arg" value="off">Turn the LED off.</input> 
    <br> 
    <input type="radio" name="arg" value="blueSwap">Toggle Blue.</input> 
    <br> 
    <input type="radio" name="arg" value="allSwap">Toggle All.</input> 
    <br> 
    <br> 
    <input type="submit" value="Do it!"/> 
    </form> 
    <br> 
    </center> 

    <script 
    src="https://code.jquery.com/jquery-2.2.4.min.js" 
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
    crossorigin="anonymous"></script> 

    <script> 
    let url = 'https://api.particle.io/v1/devices/2f0021000547353138383138/led?access_token=150a347fb4277975913f5dfe24e2fb739171b3c5' 

    $('form').on('submit', (e) => { 
     e.preventDefault() 
     let data = $(this).serialize() 
     $.ajax({ 
     url: url, 
     type: 'POST', 
     data: data 
     }).done(() => { 
     console.log('sent') 
     }) 
    }) 
    </script> 
    </body> 
</html> 
+1

이 잘못 형성 질문입니다 확인하시기 바랍니다. 조언을 보려면 참조하십시오 : http://stackoverflow.com/help/how-to-ask –

+0

질문이 뭐죠? 모든 경우에 done()이 호출됩니다. –

답변

0

이 코드는 그대로 작동합니다.

아마도이 당신의 스크립트를 포장 :

$(function(){ 

... 

}); 

이 전체 페이지가로드 될 때까지 (따라서 submit 이벤트를 바인딩) 코드를 실행하기 위해 대기합니다. 이벤트가 바인드되기 전에 <form>이로드되지 않았을 수 있습니다. 그러나 내가 말한대로 개발자 도구의 네트워크 탭에서 POST이 서버로 전송되었음을 알 수 있습니다.

+0

그것은 API를 가진 무언가 일 것임에 틀림 없다 - 나는 그것을 이해할 수 없다. –

1

일부 브라우저는 지원되지 않습니다. Arrow Function. 일반 ECMAScript 5로 시도해 볼 수 있습니다.

데모 : https://jsfiddle.net/rab5j0ua/

반드시 입력 태그 <input.../>하지 <input...>...</input>

<!DOCTYPE> 
<html> 
<body> 
    <center> 
     <br> 
     <br> 
     <br> 
     <form> 
      Tell your device what to do!<br> 
      <br> 
      <input type="radio" name="arg" value="on" />Turn the LED on. 
      <br> 
      <input type="radio" name="arg" value="off" />Turn the LED off. 
      <br> 
      <input type="radio" name="arg" value="blueSwap" />Toggle Blue. 
      <br> 
      <input type="radio" name="arg" value="allSwap" />Toggle All. 
      <br> 
      <br> 
      <input type="submit" value="Do it!" /> 
     </form> 
     <div id="result"></div> 
     <br> 
    </center> 

    <script src="https://code.jquery.com/jquery-2.2.4.min.js" 
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
      crossorigin="anonymous"></script> 

    <script> 
     var url = 'https://api.particle.io/v1/devices/2f0021000547353138383138/led?access_token=150a347fb4277975913f5dfe24e2fb739171b3c5' 

     $('form').submit(function (e) { 
      e.preventDefault(); 
      var data = $(this).serialize(); 
      $.ajax({ 
       url: url, 
       type: 'POST', 
       data: data 
      }) 
       .success(function (result) { 
        $('#result').text(JSON.stringify(result)); 
        console.log(result); 
       }); 
     }); 
    </script> 
</body> 
</html> 
+1

뭔가 작고, 너무 파괴적이다 : p ... 훌륭한 대답! – Evochrome