Node.js 速递 | JQuery 获取 JSON 时,客户端没有任何反应

Posted

技术标签:

【中文标题】Node.js 速递 | JQuery 获取 JSON 时,客户端没有任何反应【英文标题】:Node.js Express | JQuery Nothing happens on client when getting a JSON 【发布时间】:2013-11-21 09:54:23 【问题描述】:

我想在 html5 网站上接收来自 PostgreSQL 数据库的 JSON。因此,在服务器端,我使用 node-postgres 模块进行数据库连接,并使用 express 模块进行通信。

问题是在从服务器获取数据时,我在 html 中没有看到任何警报。甚至没有抛出警报。

这就是我的代码到目前为止的样子,对于任何可以提供帮助的人:

服务器端

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

app.get('/data', function(req, res)
   var pg = require('pg'); 

            var conString = "postgres://postgres:postgres2@localhost/spots";

            var client = new pg.Client(conString);
            client.connect(function(err) 
              if(err) 
                res.send('could not connect to postgres');
              
              client.query('SELECT * from spots_json where id=3276', function(err, result) 
                if(err) 
                 res.send('error running query'); 
                
                res.set("Content-Type", 'text/javascript'); // i added this to avoid the "Resource interpreted as Script but transferred with MIME type text/html" message
                res.send(JSON.stringify(result.rows[0].json));
                              client.end();
              );
            ); 

);

app.listen(3000);

客户端

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"></meta>
    <meta charset="utf-8"></meta>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" ></script>

    <script>

   $.get('http://localhost:3000/data?callback=?',, function(data)
       alert(data.type); 
   ,"json");                  

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

客户端现在在http://localhost:8888/prueba/prueba.html上执行

我得到一个带有以下响应的 js:

"\"type\":\"Point\",\"coordinates\":[-2.994783,43.389217]"

响应可以在以下屏幕截图中看到:

【问题讨论】:

【参考方案1】:

result.rows[0].json 不是一个对象,它是一个字符串。你不需要stringify它:

res.send(result.rows[0].json);

编辑:

如果您在不同端口上使用两台服务器,则需要使用 JSONP。 jQuery 在客户端使这变得简单,但您需要在服务器中实现它 (example):

if(req.query.callback) 
  res.send(req.query.callback + '(' + result.rows[0].json + ');');
 else 
  res.send(result.rows[0].json);


顺便说一句,如果您在某个回调中遇到错误,您需要return,以防止后续代码被执行。

if(err) 
  res.end('error message');
  return;
  // Or shorter: return res.end('error message');

【讨论】:

好的,我现在可以在 chrome 的控制台中看到我得到的信息:"type":"Point","coordinates":[-2.994783,43.389217] 但警报仍未显示我在 chromes 控制台中收到以下错误: Uncaught SyntaxError: Unexpected token : :3000/data?callback=jsonp1383996982220:1 回调真的有必要吗?如果我不使用它,我会得到 XMLHttpRequest 无法加载 localhost:3000/data。 Access-Control-Allow-Origin 不允许来源localhost:8888。错误。

以上是关于Node.js 速递 | JQuery 获取 JSON 时,客户端没有任何反应的主要内容,如果未能解决你的问题,请参考以下文章

使用 jQuery - JSONP 从托管在 Vagrant VM 上的第三方 Node.js 服务器获取数据

如何在Node.js中获取本机本地IP地址

在 Windows 上运行 Python 以获取 Node.js 依赖项

如何使用 node.js 在cheerio 中获取元素名称

如何将 JQuery AJAX 请求中的数据发送到 Node.js 服务器

jQuery 和 Node.js 有啥区别? [关闭]