Question

我对此很新，我不明白为什么我的脚本没有从html加载......这是我的主要问题。

＆＃xA;＆＃xA;

比，我想获得可用COM端口的列表并将内容发送到可用端口。我安装了serialport v 6.1.1。我创建了带标签的index.html，但似乎没有工作（加载）。当这工作时，我想在html上获取表单以获取并将数据（输入文本）传递给received.js。 js文件中可能存在错误但无法判断，因为没有加载任何脚本。

＆＃xA;＆＃xA;

控制台返回错误：

＆＃xA;＆＃xA ;

  SyntaxError：期望表达式，得到'＆lt;' [了解更多] index.js：1＆＃xA; SyntaxError：期望表达式，得到'＆lt;' [了解详情] received.js：1＆＃xA;

＆＃xA;＆＃xA;

起点是server.js：

＆＃xA;＆＃xA;

  var http = require（'http'）;＆＃xA; var fs = require（'fs'）;＆＃xA; var http_IP ='127.0.0.1';＆＃xA; var http_port = 9876;＆＃xA;＆＃xA; //生成html＆＃xA;函数onRequest（请求，响应）{＆＃xA; responce.writeHead（200，{'Content-type'：'text / html'}）;＆＃xA; fs.readFile（'。/ index.html'，null，function（error，data）{＆＃xA; if（error）{＆＃xA; responce.writeHead（404）;＆＃xA; responce.write（'文件未找到'）;＆＃xA;} else {＆＃xA; responce.write（data）;＆＃xA;}＆＃xA; responce.end（）;＆＃xA;}）;＆＃xA; ＆＃xA;}＆＃xA;＆＃xA; http.createServer（onRequest）.listen（http_port）;＆＃xA; console.log（'侦听http：//'+ http_IP +'：'+ http_port） ;＆＃xA;

＆＃xA;＆＃xA;

index.js（也不是提醒或控制台正在打印消息）

＆＃xA;＆＃xA;

  console.log（“Hello”）;＆＃xA; alert（'Hello'）;＆＃xA;＆＃xA; var serialport = require（'serialport'）;＆＃xA;＆＃xA; // list serial ports：＆＃xA; serialport.list（function（err，ports）{＆＃xA; ports.forEach（function（port）{＆＃xA; console.log（port.comName）;＆＃xA ;＆＃xA;}）;＆＃xA;}）;＆＃xA;＆＃xA; serialport.list（（错误，端口）=＆gt; {＆＃xA; console.log（'端口'，端口） ;＆＃xA; if（错误）{＆＃xA; document.getElementById（'error'）。textContent = err.message＆＃xA; return＆＃xA;} else {＆＃xA; // var port = new serialport（ ““FTDIBUS \ VID_0403 + PID_6 001 + FT9PQV36A \ 0000“'，{baudRate：115200}）＆＃xA; document.getElementById（'error'）。textContent = message＆＃xA; }＆＃XA;＆＃XA; if（ports.length === 0）{＆＃xA; document.getElementById（'error'）。textContent ='没有发现端口'＆＃xA; }＆＃XA;＆＃XA; const headers = Object.keys（ports [0]）＆＃xA; const table = createTable（headers）＆＃xA; tableHTML =''＆＃xA; table.on（'data'，data =＆gt; tableHTML + = data）＆＃xA; table.on（'end'，（）=＆gt; document.getElementById（'ports'）。innerHTML = tableHTML）＆＃xA; ports.forEach（port =＆gt; table.write（port））＆＃xA; table.end（）;＆＃XA;＆＃XA;}）;＆＃XA;

＆＃XA;＆＃XA; 的index.html 
＆＃XA ;＆＃xA;  ＆lt;！DOCTYPE html＆gt;＆＃xA;＆lt; html lang =“en”＆gt;＆＃xA;＆lt; head＆gt;＆＃xA; ＆lt; meta charset =“utf-8”＆gt;＆＃xA; ＆lt; meta name =“viewport”content =“width-device-width，initial-scale = 1.0”＆gt;＆lt; /＆gt;＆＃xA; ＆lt; meta http-equiv =“X_UA-Compatible”content =“ie = edge”＆gt;＆lt; /＆gt;＆＃xA; ＆lt; title＆gt;我的串行端口v1＆lt; / title＆gt;＆＃xA;＆lt; / head＆gt;＆＃xA;＆lt; body＆gt;＆＃xA; ＆lt; h3 id =“h3”＆gt; Serial Port v1＆lt; / h3＆gt;＆＃xA;＆＃xA; ＆lt; FORM class =“form”NAME =“myform”ACTION =“”METHOD =“POST”onsubmit =“return false”＆gt;输入要处理的命令（不带“（）”）：＆lt; BR＆gt;＆＃xA; ＆lt; INPUT TYPE =“text”NAME =“inputbox”id =“inputbox”VALUE =“”＆gt;＆＃xA; ＆lt; INPUT TYPE =“button”NAME =“button”id =“send_button”Value =“Click”onClick =“”＆gt;＆＃xA; ＆LT; / FORM＆GT;＆＃XA;＆＃XA; ＆lt; script type“text / javascript”src =“index.js”＆gt;＆lt; / script＆gt; ＆＃XA;＆＃XA; ＆lt; script src =“received.js”＆gt;＆＃xA; ＆LT; /脚本＆GT;＆＃XA;＆＃XA;＆＃XA;＆LT; / BODY＆GT;＆＃XA;＆LT; / HTML＆GT;＆＃XA;  
＆＃XA;＆＃XA ;  received.js 
＆＃xA;＆＃xA;   const serialport = require（'serialport'）;＆＃xA;＆＃xA; var ready ='';＆ #xA;＆＃xA;＆＃xA; const portName ='COM20';＆＃xA; var port = new serialport（portName，{parser：serialport.parsers.readline（'\ r \ n'），baudRate：19200 }＆;＆＃xA;＆＃xA;＆＃xA; // **** SENDING＆＃xA;＆＃xA; port.open（function（err）{＆＃xA; if（err）{＆＃xA ; return console.log（'错误打开端口：'，err.message）;＆＃xA;}＆＃xA;＆＃xA;＆＃xA; var button = document.getElementById（'send_button'）;＆＃xA ; var form = document.getElementsByName（'myform'）;＆＃xA; console.log（“”）＆＃xA;＆＃xA; // var value ='';＆＃xA;＆＃xA; //处理html表单＆＃xA; button.onclick = function myFormHandler（）{＆＃xA;＆＃xA; var value = button.form.inputbox.value;＆＃xA;＆＃xA; console.log（'输入值： '，value）;＆＃xA; //存储输入的值＆＃xA; localStorage.setItem（'command_value'，value）;＆＃xA; command_optics = value;＆＃xA; console.log（'Value o f值'，值）;＆＃xA; console.log（'command_optics的值'，command_optics）;＆＃xA; //回忆输入值＆＃xA; var command_optics = localStorage.getItem（'command_value'）;＆＃xA; console.log（'command_optics：'，command_optics）;＆＃xA; //从之前的输入中清除本地存储＆＃xA; localStorage.clear（）＆＃XA; //发送命令输入到表单文本框＆＃xA; var sent_data ='（'+ command_optics.toUpperCase（）+'）\ r \ n';＆＃xA; var received_raw_data;＆＃xA;＆＃xA; //通过COM端口发送数据＆＃xA; port.write（sent_data，function（err）{＆＃xA; if（err）{＆＃xA; return console.log（'write on write'，err.message）;＆＃xA;}＆＃xA; console .log（'Port.write：'，sent_data）;＆＃xA;}＆＃xA;）;＆＃xA; }＆＃XA;＆＃XA; // **** RECEIVING＆＃xA;＆＃xA; //从COM端口接收数据＆＃xA; port.on（'data'，function（data）{＆＃xA;＆＃xA; //传递给var received_raw_data的原始数据，用于在html＆＃xA中显示; received_raw_data = data;＆＃xA;＆＃xA; //修剪'C：'，'R：'，'L：'来自字符串＆＃xA; // data = data.replace（'CRL：'，''）＆＃xA; if（data.length＆gt; 50）{ ＆＃xA; data = data.slice（2）;＆＃xA;}＆＃xA;＆＃xA; console.log（'Data received（raw）：'，data）;＆＃xA; // document。 getElementById（'data_from_optics'）。textContent = data＆＃xA; //将数据从光学模块写入html＆＃xA; document.getElementById（'data_from_optics'）。textContent = received_raw_data;＆＃xA;}）;＆＃xA;＆ #xA; //读取可用数据但保持流不进入“流动模式”＆＃xA; port.on（'readable'，function（）{＆＃xA; console.log（'Data2：'，port.read（））;＆＃xA;}）;＆＃xA;＆＃xA;}）; ＆＃XA;  
＆＃XA;

Answer 1

查看您的HTTP服务器：

function onRequest(request, responce){
  responce.writeHead(200,{'Content-type': 'text/html'});
  fs.readFile('./index.html', null, function(error, data){
   if(error){
      responce.writeHead(404);
      responce.write('File not found');
   }else{
     responce.write(data);
   }
    responce.end();
 });

}

因此...

浏览器要求index.js
服务器说“OK！这是一些HTML”
服务器输出index.html

您需要注意浏览器要求的文件，并向他们提供，而不是总是发送index.html。

由于您发送的是HTML而不是JavaScript，因此当它在HTML开头看到<并尝试将其视为JavaScript时会引发错误。

然后查看index.js ...

alert('Hello');

var serialport = require('serialport');

alert是一个浏览器功能，因此如果您在浏览器中执行它，它将正常运行。

但需要serialport库？这不会在浏览器中运行。这取决于Node。

从html中的<script>标记中调用时，不会加载JavaScript文件

1 个答案: