需要检索数据使用快递，我自己的网址和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呼叫

回答

相关问题