2017-02-25 8 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...>...</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

関連する問題