Question

我尝试在用户单击主页中的按钮并使用get方法显示list.html后将localhost：9000重定向到localhost：9000 / list。我如何使用display.js中的AJAX调用和routes.js中的get请求来重定向url并提供我的list.html。当我点击按钮时，没有任何反应。要更改网址，我尝试了windows.location和location.href，但我不确定是否需要这些。

目录布局

dir main
    -server.js
    dir subMain
      dir display
        -display.js
      dir routing
        -routes.js
      dir public
        -home.html
        -list.html

server.js

var path = require('path');
var express = require('express');
var app = express();
require('./subMain/routing/routes.js')(app, path, express);

app.listen(9000, function(){
     console.log('connected on 9000')
})

routes.js

module.exports = function(app, path, express){
    app.use(express.static("app"))
    app.use(express.static(__dirname + "/public"));
    app.use(express.static(__dirname + "/routing"));
    app.use(express.static(__dirname + "/display"));
    app.use(function(request, response, next){
      response.sendFile(path.join(__dirname + "/..", "public", "home.html"));
    })
    app.get('/list', function(request, response){
        response.sendFile(path.join(__dirname + '/..', 'public', 'list.html'));
    });

}

display.js

$(document).on('click', '#btn', sendSurvery);

function sendSurvery(){
    window.location = 'survey.html';
    //var myQueryUrl = "http://localhost:9000/survey";

    //$.ajax({url: myQueryUrl, method: 'GET', success: function(result){
        // location.href = "http://localhost:9000/list"

    //}}).done(function(response){

    //});
}

更新：由于AJAX不需要在浏览器上更改html，因此在哪里可以使用windows.location，以及如何将其连接到我的list.html的get请求？现在，我尝试在server.js文件和routes.js文件中执行get请求，但是当我单击按钮时，url将更改为调查但不会更改为浏览器上的内容（list.html未显示）

更新2：我摆脱了AJAX调用并使用了：windows.location = localhost:9000/list但是get请求没有将list.html文件发送到浏览器。我也尝试将get请求放在server.js文件中，但它仍然无法执行任何操作

Answer 1

你不需要这里的AJAX（A代表异步） - 你可以简单地window.location = http://localhost:9000/survey 这将有效地告诉浏览器向服务器发送同步GET请求，并将当前页面替换为它接收的任何响应。

Answer 2

不确定这是否是您要查找的内容，但您列出的树状结构中没有survey.html ....

另外，如果您想进行相对访问，可能需要添加类似于以下内容的行：

app.use(express.static(path.join(__dirname, 'subMain/public')));

Answer 3

display.js

$(document).on('click', '#btn', sendSurvery);

function sendSurvery(){
    var myQueryUrl = "http://localhost:9000/";
    window.location.replace(myQueryUrl + 'survey.html)
}

这样您就可以将myQueryUrl实际存储为其他位置的配置变量，以便根据您的环境进行更改。

您还必须确保链接到html文件中的display.js，以便最初从服务器请求。服务器不会只是为您发送。

并且您不会显示文件的其余部分，但如果您不这样做，则可能需要初始化对点击处理程序的调用：

(function(){
    $(document).on('click', '#btn', sendSurvery);
}();

作为注释，GET请求（以及所有与此有关的请求）都源自客户端并发送到服务器。因此，必须将它们放在发送给客户端的文件中。

单击事件后重定向URL并更改页面，并使用GET

3 个答案: