如何將串行輸出從arduino發送到帶有ajax jquery的文本框

Question

有誰會碰巧知道如何從設備接收USB串行輸出並使用jQuery將其發送到html文本框？我知道如何使用ajax和jQuery將命令發送到串行設備，但我無法弄清楚如何接收設備發回的消息？

以下JavaScript是我用來發送消息到設備，Arduino的，從一個按鈕點擊：

<!-- 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*/ 
 
?>

以下代碼來自顯示javascript操作按鈕的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

所有你需要做的就是處理ajax響應。在我的例子中，我稱它爲響應（參數爲匿名函數綁定成功）。代碼是未經測試，但應該工作：

<!-- 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腳本打印/ echo'es放置在input上響應的消息。