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

Question

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

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/。请求的资源上没有“访问-控制-允许-原产地”标题。因此，原产地'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" }

Answer 1

我一直收到一个错误，上面写着“require”没有定义

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

响应具有HTTP状态代码404。

URL正在抛出404错误。

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

Answer 2

您的server.js文件是为在您自己的服务器上运行node.js而设计的。它不会在浏览器中的网页中运行。

因此，不能在网页中这样做：

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

相反，您必须使用node.js运行该文件，如下所示：

node server.js

而且，如果您在正确的主机上这样做，那么您就可以从您的网页中通过Ajax调用访问该服务器。

注意:浏览器对进行Ajax调用实施相同的起源限制，因此您必须将网页和ajax调用放在相同的来源(例如，从您的express服务器服务web页面并从那里在浏览器中加载它)，或者您必须在您的快递服务器中启用CORS，这样它将告诉浏览器跨源请求是可以的。

如果您只想为单个网页添加一条路由，您可以这样做：

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

然后，您将以http://localhost:10000/index.html的形式加载网页。

如果您试图为许多网页添加一条路由，那么您将把它们全部放在一个公共目录中，并使用 middleware。

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