需要檢索數據使用快遞，我自己的網址和AJAX呼叫

我正在通過使用快遞從我的服務器檢索數據。我有一個按鈕需要點擊後顯示名稱，但它似乎並沒有工作。我不斷收到一個錯誤，說「要求」沒有定義，當我點擊搜索按鈕，我得到一個錯誤信息：需要檢索數據使用快遞，我自己的網址和AJAX呼叫

的jquery.js：9631 GET http://localhost:10000/發送@的jquery.js：9631ajax @的jquery.js ：9176displayTurtles @ serverFS.js：35dispatch @ jquery.js：4641elemData.handle @ jquery.js：4309 index.html：1 XMLHttpRequest無法加載http://localhost:10000/。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許原產地'null'訪問。該響應具有HTTP狀態代碼404.

我需要在HTML上顯示一個列表中的龜，以後也允許用戶使用POST方法添加新的龜對象。

server.js文件

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

server.get('/', function (req, res) { 
     var turtles = { 
     message: "success", 
     data: [ 
     { 
      name: "Raphael", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Leonardo", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Donatello", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Michelangelo", 
      favFood: "Pizza" 
     } 
     ] 
    }; 
     res.send(turtles) 
}) 

server.listen(10000, function() { 
    console.log('Example app listening on port 3000!') 
})

serverFS.js文件

$(document).ready(function(){ 

    var turtleList = $('<ol class="theList">') 
    $('.DTurtles').append(turtleList); 

    $(document).on('click', '#show', displayTurtles); 
}); 

function displayTurtles(){ 

    var emptyArray = []; 

    var myQueryUrl = "http://localhost:10000/" + turtleSearch; 

    $.ajax({url: myQueryUrl, method: 'GET'}).done(function(response){ 

     var loopLength = response.data.length; 
     var name; 
     var food; 
     for(var x = 0; x < loopLength; x++) { 

      var emptyTurt = {}; 
      name = response.data[x].name; 
      food = response.data[x].favFood; 

      emptyTurt.name = name; 
      emptyTurt.food = food; 

      emptyArray.push(emptyTurt); 
     } 
     console.log(emptyArray) 

    }); 
    console.log(emptyArray) 

}

HTML文件

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div class="form"> 
     <form> 
      <label for="search-input">Type Something</label><br> 
      <input type="text" id="search-input"><br><br> 
      <input id="show" type="button" value="For Emergencies Only"> 
     </form> 
    </div> 
    <div class="DTurtles"> 
    </div> 

<script src="https://code.jquery.com/jquery.js"></script> 

<script type="text/javascript" src="serverFS.js"></script> 
</body> 
</html>

編輯：我是否需要具體在服務器上我的get函數.js文件？我讀了快遞的網站上，它說的路由參數做：

Route path: /users/:userId/books/:bookId 
Request URL: http://localhost:3000/users/34/books/8989 
req.params: { "userId": "34", "bookId": "8989" }

來源

2016-11-25 H. Lee

我不斷收到寫着「需要」的錯誤是沒有定義

server.js目的顯然是要通過運行Node.js並沒有嵌入到網頁中。

響應有HTTP狀態代碼404

的URL是拋出404錯誤。

假設你通過Node.js的運行server.js（除了嘗試，失敗，以直接在瀏覽器中運行），則它可能是因爲您鍵入比turtles以外的東西在搜索框中。 /turtles是服務器設置運行的唯一URL。

來源

2016-11-25 22:45:42 Quentin

您的server.js文件旨在運行在您自己的服務器上的node.js中。它不會在瀏覽器的網頁中運行。

所以，這不能在網頁上完成的：

<script type="text/javascript" src="server.js"></script>

相反，你必須運行與node.js的該文件作爲：

node server.js

而且，如果你做到這一點正確的主機，然後您可以通過來自網頁的Ajax調用來訪問該服務器。

注意：瀏覽器在製作Ajax調用時強制執行相同的原始限制，因此您必須將網頁和ajax調用放在同一個來源（例如，從您的快速服務器提供網頁並將其從中加載瀏覽器），或者您必須在快速服務器中啓用CORS，以便告知瀏覽器交叉源請求正常。

如果你只是想添加一個路線單一的網頁，你可以是這樣做的：

app.get("/index.html", function(req, res) { 
    res.sendFile("/somePath/index.html"); 
});

然後，你會加載Web頁面http://localhost:10000/index.html。

如果您想爲許多網頁添加路由，那麼您會將它們全部放在一個公共目錄中並使用express.static() middleware。

app.use(express.static(path.join(__dirname, "someDirectoryName"));

來源

2016-11-25 22:48:17 jfriend00

我確實運行了節點server.js和.listen函數，它向我展示了測試警報。但數據不會被檢索到並顯示在我的HTML –

@ H.Lee - 那麼你爲什麼將它包含在你的網頁中。刪除。正如我在我的回答中所說的，您也有同樣的原產地問題，可能是因爲您正在從文件系統加載網頁，然後嘗試訪問您的服務器。您需要從Web服務器加載網頁，然後您可以通過該網頁上的ajax訪問同一服務器。您需要爲網頁本身添加一個路由到您的Web服務器。 – jfriend00

我擺脫了底部的標籤。如何從y Web服務器加載網頁，併爲網頁添加路由到我的Web服務器 –

需要檢索數據使用快遞，我自己的網址和AJAX呼叫

回答

相關問題