首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在node.js中使用jQuery ajax调用

如何在node.js中使用jQuery ajax调用
EN

Stack Overflow用户
提问于 2011-03-21 12:59:45
回答 4查看 108.2K关注 0票数 71

这与Stream data with Node.js类似,但我觉得这个问题没有得到充分的回答。

我尝试使用jQuery ajax调用(get、load、getJSON)在页面和node.js服务器之间传输数据。我可以在我的浏览器中点击地址并看到'Hello world!‘,但是当我在我的页面上尝试时,它失败了,并且显示我没有得到任何响应。我设置了一个简单的测试页面和hello world示例来测试这个:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>get test</title> 
</head>
<body>
    <h1>Get Test</h1>
    <div id="test"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
    <script>
        $(document).ready(function() {
            //alert($('h1').length);
            $('#test').load('http://192.168.1.103:8124/');
            //$.get('http://192.168.1.103:8124/', function(data) {                
            //  alert(data);
            //});
        });
    </script>
</body>
</html>

代码语言:javascript
复制
var http = require('http');

http.createServer(function (req, res) {
    console.log('request received');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8124);
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-03-21 18:05:53

如果您的简单测试页面位于hello world node.js示例之外的其他协议/域/端口上,那么您正在进行跨域请求并违反了same origin policy,因此您的jQuery ajax调用(get和load)将静默地失败。要实现这种跨域工作,您应该使用基于JSONP的格式。例如node.js代码:

代码语言:javascript
复制
var http = require('http');

http.createServer(function (req, res) {
    console.log('request received');
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('_testcb(\'{"message": "Hello world!"}\')');
}).listen(8124);

和客户端JavaScript/jQuery:

代码语言:javascript
复制
$(document).ready(function() {
    $.ajax({
        url: 'http://192.168.1.103:8124/',
        dataType: "jsonp",
        jsonpCallback: "_testcb",
        cache: false,
        timeout: 5000,
        success: function(data) {
            $("#test").append(data);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            alert('error ' + textStatus + " " + errorThrown);
        }
    });
});

还有其他方法可以让它工作,例如通过设置reverse proxy或完全使用像express这样的框架构建web应用程序。

票数 86
EN

Stack Overflow用户

发布于 2011-03-30 20:28:47

感谢yojimbo的回答。为了将其添加到他的示例中,我希望使用jquery方法$.getJSON,该方法在查询字符串中放置一个随机回调,因此我还希望在Node.js中将其解析出来。我还想传回一个对象并使用stringify函数。

这是我的客户端代码。

代码语言:javascript
复制
$.getJSON("http://localhost:8124/dummy?action=dostuff&callback=?",
function(data){
  alert(data);
},
function(jqXHR, textStatus, errorThrown) {
    alert('error ' + textStatus + " " + errorThrown);
});

这是我的服务器端Node.js

代码语言:javascript
复制
var http = require('http');
var querystring = require('querystring');
var url = require('url');

http.createServer(function (req, res) {
    //grab the callback from the query string   
    var pquery = querystring.parse(url.parse(req.url).query);   
    var callback = (pquery.callback ? pquery.callback : '');

    //we probably want to send an object back in response to the request
    var returnObject = {message: "Hello World!"};
    var returnObjectString = JSON.stringify(returnObject);

    //push back the response including the callback shenanigans
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end(callback + '(\'' + returnObjectString + '\')');
}).listen(8124);
票数 9
EN

Stack Overflow用户

发布于 2011-03-21 14:36:34

我认为您的html页面托管在不同的端口上。大多数浏览器中的同源策略requires,即加载的文件与加载的文件位于同一端口。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5373987

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档