如何使用jQuery ajax調用node.js

這與Stream data with Node.js類似，但我不覺得這個問題得到了充分的回答。如何使用jQuery ajax調用node.js

我正在嘗試使用jQuery ajax調用（get，load，getJSON）在頁面和node.js服務器之間傳輸數據。我可以從我的瀏覽器中打開地址並看到'Hello World！'，但是當我從我的頁面嘗試此操作時，它失敗並顯示我沒有收到任何迴應，我設置了一個簡單的測試頁面和hello世界示例來測試它：

<!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>

和

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);

來源

2011-03-21 briznad

我們需要知道什麼是你加載的文件中 - 如何執行加載文件中的代碼？ – mattsven 2011-03-21 05:08:38

如果您的簡單測試頁位於其他協議/主要/端口比你的世界node.js例如你正在做跨域請求並且違反same origin policy，因此你的jQuery ajax調用（get和load）失敗了。要獲得這個跨域的工作，您應該使用基於JSONP的格式。例如Node.js的代碼：

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的：

$(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得到這個工作，例如或構建Web應用程序完全用框架如express。

來源

2011-03-21 10:05:52 yojimbo87

太棒了，謝謝！我將其設置爲使用jsonp，如您的示例中所述，並且它的工作完美。 – briznad 2011-03-22 06:08:32

很好的回答yojimbo，這真的幫了我。我已經發布了一些額外的東西的答案。 – 2011-03-30 12:19:11

如何使用express來構建nodejs應用程序將解決跨域請求問題？ – 2011-04-19 03:18:09

我想你的HTML頁面在不同端口上託管。同源策略requires在加載文件是相同的端口而不是加載文件大多數瀏覽器上。

來源

2011-03-21 06:36:34 Adrien

感謝yojimbo的回答。爲了添加他的示例，我想使用jquery方法$ .getJSON，它在查詢字符串中放置了一個隨機回調，因此我也想在Node.js中解析這個方法。我也想傳回一個對象並使用stringify函數。

這是我的客戶端代碼。

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

這是我的服務器端Node.js加載

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);

來源

2011-03-30 12:28:46

您的代碼效果很好。請注意，您會收到一個MIME錯誤，並將text/plain作爲內容類型。更改內容類型爲應用程序/ javascript解決了這一問題。 – payling 2011-11-29 19:27:45

使用像在服務器端執行以下操作：

http.createServer(function (request, response) { 
    if (request.headers['x-requested-with'] == 'XMLHttpRequest') { 
     // handle async request 
     var u = url.parse(request.url, true); //not needed 

     response.writeHead(200, {'content-type':'text/json'}) 
     response.end(JSON.stringify(some_array.slice(1, 10))) //send elements 1 to 10 
    } else { 
     // handle sync request (by server index.html) 
     if (request.url == '/') { 
      response.writeHead(200, {'content-type': 'text/html'}) 
      util.pump(fs.createReadStream('index.html'), response) 
     } 
     else 
     { 
      // 404 error 
     } 
    } 
}).listen(31337)

來源

2011-04-26 19:09:26

如何使用jQuery ajax調用node.js

回答

相關問題