【求助】Nodejs相关：在html中引入本地jquery.js文件无效

【求助】Nodejs相关：在html中引入本地jquery.js文件无效

将node.js移植到arm9上了，使用express写了个测试页面在上面测试了下，发现运行有问题。 就想使用下面的方式直接做个web页面先测试下， server.js,index.html,query-1.10.2.min.js都放在同一目录。 在html中引入jquery，使用google的源就没有问题，使用本地的query-1.10.2.min.js文件就没有生效。请问该怎么解决？一直做底层开发，对js脚本不熟。希望大家指点下。多谢！！！

//server.js

    var app = require('http').createServer(handler) 
    , io = require('socket.io').listen(app)
    , fs = require('fs')

app.listen(80);

function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
  res.writeHead(500);
  return res.end('Error loading index.html');
}

res.writeHead(200);
res.end(data);
});
}

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});

// index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Control</title>
    <script src="/socket.io/socket.io.js"></script>
    <!-- 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
     -->
    <script src="query-1.10.2.min.js" type="text/javascript"></script>
    <script>
     $(document).ready(function(){
    $("p").click(function(){
    $(this).hide();});
    var socket = io.connect('http://localhost');
    socket.on('news', function (data) {
    console.log(data);
    $("p").text(data);
    socket.emit('my other event', { my: 'data' });});
    });
    </script>
    </head>
    <body>
    <p> Hide me </p>
    </body>
    </html>

5 回复

针对您提出的问题，主要是在HTML中引用本地的jQuery文件时没有生效。这可能是因为文件路径错误或者服务器没有正确地提供静态文件服务。下面是一些可能的解决方案：

解决方案

1. 确保文件路径正确

首先，请确保query-1.10.2.min.js文件确实存在于您的项目根目录，并且名称没有拼写错误。

2. 使用Express处理静态文件

为了使Express能够正确地提供静态文件，我们需要添加一行代码来指定静态文件的存放目录。例如，如果您的server.js、index.html和query-1.10.2.min.js都在同一个目录下，可以这样配置：

var express = require('express');
var app = express();

// 设置静态文件目录
app.use(express.static(__dirname));

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000, function () {
  console.log('App listening on port 3000!');
});

在这个例子中，我们使用express.static中间件来告诉Express如何提供静态文件。这里我们使用__dirname变量表示当前目录作为静态文件的根目录。

3. 修改HTML中的脚本标签

确保HTML文件中的<script>标签正确引用了jQuery文件。根据上述配置，您可以直接引用query-1.10.2.min.js文件，因为Express会自动处理正确的路径。

<!DOCTYPE html>
<html>
<head>
<title>Control</title>
<script src="/socket.io/socket.io.js"></script>
<script src="/query-1.10.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });

  var socket = io.connect('http://localhost:3000'); // 注意端口号
  socket.on('news', function (data) {
    console.log(data);
    $("p").text(data);
    socket.emit('my other event', { my: 'data' });
  });
});
</script>
</head>
<body>
<p>Hide me</p>
</body>
</html>

总结

通过以上步骤，您可以确保Express服务器能够正确地提供静态文件，并且HTML文件可以正确地引用这些文件。如果问题仍然存在，请检查浏览器的开发者工具（通常按F12打开）中的网络选项卡，查看是否有404错误或其他异常情况。


明白 谢谢！！！弄了一上午.

说说怎么解决的,论坛以前给出的解决方式就是弄静态文件服务器

不好意思，我只是想移植web服务到arm上，所以没有研究怎么使用静态文件服务处理，而是直接使用express框架处理了。 最近也在学习前端开发这块，感觉要学的东西挺多的。

为了确保本地的 jquery.js 文件能够正确加载，你需要确保以下几点：

  1. 文件路径正确：确保 query-1.10.2.min.js 文件确实存在于你的项目目录中，并且路径是正确的。

  2. 服务器静态文件服务：你需要确保 Express 能够正确提供静态文件。你可以使用 express.static 中间件来实现这一点。

  3. HTML 中的路径：确保 HTML 中引用的路径与实际文件路径一致。

以下是具体的步骤和修改后的代码：

server.js

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);

app.use(express.static(__dirname)); // 设置静态文件目录为当前目录

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

io.sockets.on('connection', function(socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

server.listen(80);

index.html

确保 query-1.10.2.min.js 文件存在于与 index.html 相同的目录中，并且路径正确：

<!DOCTYPE html>
<html>
<head>
<title>Control</title>
<script src="/socket.io/socket.io.js"></script>
<script src="query-1.10.2.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });

  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    $("p").text(data);
    socket.emit('my other event', { my: 'data' });
  });
});
</script>
</head>
<body>
<p>Hide me</p>
</body>
</html>

注意事项

  • 确保 query-1.10.2.min.js 文件名称正确，没有拼写错误。
  • 确保服务器启动后，可以通过浏览器访问 http://localhost/ 来查看页面。
  • 如果仍然有问题，可以检查浏览器的开发者工具（F12），查看网络请求是否有404错误。

通过以上修改，你应该能够成功加载本地的 jQuery 文件并正常使用它。

回到顶部