arduino에서 ajax jquery로 텍스트 상자에 시리얼 출력을 보내는 방법

Question

장치에서 USB 직렬 출력을 받고 jQuery를 사용하여 html 텍스트 상자로 보내는 방법을 알고 계시나요? 직렬 장치에 ajax 및 jQuery를 사용하여 명령을 보내는 방법을 알고 있지만 장치에서 보낸 메시지를받는 방법을 알아낼 수 없습니까? 여기

<!-- Arduino Serial Connection --> 
 
<script type='text/javascript'> 
 
jQuery(function() { \t 
 
\t jQuery('#contact_form').on('click', '.button',function (e) { 
 
     e.preventDefault(); \t //prevents the default of submitting the form 
 
\t \t jQuery.ajax({ \t 
 
    \t \t type: "POST", 
 
\t \t \t url: '/test/SubmitFormWORefresh.php', 
 
\t \t \t data: "rcmd="+jQuery(this).val(), 
 
    \t \t success: function() { 
 
\t \t \t alert('Enroll Your Finger Now'); 
 
     \t \t \t \t 
 
\t \t \t } 
 
    \t \t }); 
 
    \t \t return false; 
 
\t }); 
 
\t 
 
}); 
 
\t 
 
</script>

그리고 SubmitFormWORefresh.php된다 :

다음 자바 스크립트 내가 버튼 클릭에서, 장치에 아두 이노를 메시지를 보내는 데 사용하는 것입니다

<?php 
 
$verz="1.0"; 
 
$comPort = "/dev/ttyACM0"; /*change to correct com port */ 
 
$PHP_SELF="index.php"; //This php file locate it from root 
 

 
if (isset($_POST["rcmd"])) { 
 
\t $rcmd = $_POST["rcmd"]; 
 
\t switch ($rcmd) { 
 
     \t case "Stop": 
 
\t \t $fp =fopen($comPort, "w"); 
 
\t \t sleep(2); 
 
    \t \t fwrite($fp, 1); /* this is the number that it will write */ 
 
    \t \t fclose($fp); 
 
    \t \t break; 
 
\t \t 
 
    \t \t case "Enroll": 
 
\t \t $fp =fopen($comPort, "w"); 
 
\t \t sleep(2); 
 
    \t \t fwrite($fp, 3); /* this is the number that it will write */ 
 
    \t \t fclose($fp); 
 
    \t \t break; 
 
\t \t default: 
 
    \t \t die('Crap, something went wrong. The page just puked.'); 
 
\t }/*end switch case*/ 
 
}/*end if statemen t*/ 
 
?>

다음 코드는 자바 스크립트가 조작하는 버튼을 표시하는 index.html 페이지와 직렬 장치의 출력이 표시되도록하려는 텍스트 상자의 코드입니다. 내가 버튼을 클릭하고 장치에 메시지를 보내면

<!----This is the button that I first send a message to the device --> 
 
<div id="contact_form"> 
 
<form name="contact" action=""> 
 
    \t \t <fieldset> 
 
    \t <input type="submit" name="rcmd" class="button" id="submit_btn" value="Enroll" /> 
 
    \t  </fieldset> 
 
</form> 
 
</div> 
 

 
<!----This is the textbox I need to send incoming data to--> 
 
<input type="text" value="" id="table_0_fprint_id" data-key="fprint_id" data-input_type="text" class="editDialogInput " />

는 장치가 다시 웹 페이지에 대한 직렬 연결을 통해 메시지를 보냅니다. 이 메시지를 텍스트 상자에 입력하려면 javascript가 필요합니다. 아마도 GET 함수를 사용해야 할 것이지만 제대로 작동하지는 않습니다.

Answer 1

아약스 응답을 처리하기 만하면됩니다. 내 예제에서는 (익명 함수에 대한 인수가 성공에 바인딩 됨)이라고합니다. 코드 검증되지 않은,하지만 작동합니다 :

<!-- Arduino Serial Connection --> 
 
<script type='text/javascript'> 
 
jQuery(function() { \t 
 
\t jQuery('#contact_form').on('click', '.button',function (e) { 
 
     e.preventDefault(); \t //prevents the default of submitting the form 
 
\t \t jQuery.ajax({ \t 
 
    \t \t type: "POST", 
 
\t \t \t url: '/test/SubmitFormWORefresh.php', 
 
\t \t \t data: "rcmd="+jQuery(this).val(), 
 
    \t \t success: function(response) { 
 
\t \t \t  alert('Enroll Your Finger Now'); 
 
     \t \t  $("input#table_0_fprint_id").val($(response).text()); 
 
\t \t \t } 
 
    \t \t }); 
 
    \t \t return false; 
 
\t }); 
 
\t 
 
}); 
 
\t 
 
</script>

당신은 또한 /test/SubmitFromWORefresh.php 스크립트 인쇄/응답에 input에 배치되는 메시지를 echo'es 있는지 확인해야합니다.