需要使用 express、我自己的 url 和 AJAX 调用来检索数据答案

【问题标题】：Need to retrieve data using express, my own url and AJAX call需要使用 express、我自己的 url 和 AJAX 调用来检索数据
【发布时间】：2016-11-26 07:13:58
【问题描述】：

我正在使用 express 从我的服务器检索数据。我有一个按钮需要在单击后显示名称，但它似乎不起作用。我不断收到一条错误消息，提示未定义“需要”，当我单击搜索按钮时，我收到一条错误消息：

jquery.js:9631 GET http://localhost:10000/send @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”标头。因此，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>

编辑：我需要具体说明 server.js 文件上的 get 函数吗？我在快递网站上读到，它说路由参数是这样的：

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

【问题讨论】：

标签： javascript ajax node.js express

【解决方案1】：

我不断收到一条错误消息，提示“require”未定义

server.js 显然设计为通过 Node.js 运行，而不是嵌入到网页中。

响应的 HTTP 状态代码为 404。

URL 引发 404 错误。

假设您正在通过 Node.js 运行 server.js（除了尝试直接在浏览器中运行它，但失败了），这可能是因为您在搜索框中输入了 turtles 以外的其他内容。 /turtles 是服务器设置为运行的唯一 URL。

【讨论】：

【解决方案2】：

您的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");
});

然后，您将网页加载为http://localhost:10000/index.html。

如果您尝试为多个网页添加路由，则可以将它们全部放在一个公共目录中并使用express.static() middleware。

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

【讨论】：

我确实运行了节点 server.js 并且 .listen 函数通过向我显示测试警报来工作。但是数据没有被检索并显示在我的html上
@H.Lee - 那你为什么要把它包含在你的网页中。删除它。正如我在回答中所说，您也有同源问题，可能是因为您正在从文件系统加载网页，然后尝试访问您的服务器。您需要从您的 Web 服务器加载网页，然后您可以从该网页通过 ajax 访问同一服务器。您需要为网页本身添加到您的网络服务器的路由。
我去掉了底部的标签。如何从 y Web 服务器加载网页，并为网页添加到我的 Web 服务器的路由
@H.Lee - 看看我在答案末尾添加了什么。
sendFile 是做什么的。我只想在我的 server.js 文件中检索海龟对象中的名称并将其显示为我的 html 中的列表。