節點js在客戶端表示靜態不接收post響應

Question

嗨，大家好我是來自移動開發，並試圖更多地瞭解節點js運行時，所以我已經有一個簡單的「應用程序」js客戶端和我'正試圖將它與節點js express服務器一起使用。

爲了我的目的，我使用了一個靜態文件，因爲我所有的html都是由js和DOM生成的。

問題：

當我在它總是重定向我到index.html中的DB做後用Ajax來存儲值和不執行我的客戶端回調代碼來創建桌子。

app.js

let express = require('express'); 
let path = require('path'); 
let favicon = require('serve-favicon'); 
let logger = require('morgan'); 
let cookieParser = require('cookie-parser'); 
let bodyParser = require('body-parser'); 

let index = require('./routes/index'); 
let cups = require('./routes/route-cup'); 
let leagues = require('./routes/route-league'); 
let players = require('./routes/route-player'); 
let teams = require('./routes/route-team'); 

let app = express(); 

app.use(favicon(path.join(__dirname, 'public', '/images/favicon.png'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 
app.use(cookieParser()); 


app.use('/cups', cups); 
app.use('/leagues', leagues); 
app.use('/players', players); 
app.use('/teams', teams); 
app.use(express.static("public", { 
    "index": "index.html" 
})); 

// catch 404 and forward to error handler 
app.use(function (req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handler 
app.use(function (err, req, res, next) { 
    // set locals, only providing error in development 
    res.locals.message = err.message; 
    res.locals.error = req.app.get('env') === 'development' ? err : {}; 

    // render the error page 
    res.status(err.status || 500); 
    res.render('error'); 
}); 

module.exports = app; 

路線：

let express = require('express'); 
let router = express.Router(); 
let mysql = require("mysql"); 
let executeSql = require("../scripts/execute-sql"); 

router.get('/', function (req, res, next) { 
    executeSql.executeSelect(res, function (rows, fields) { 
     res.json(rows); 
    }, "SELECT * FROM `footTour-sgbd`.player;") 
}); 

router.post('/submit-player', function (req, res, next) { 
    let obj = req.body; 
    let keys = Object.keys(obj); 
    let placeHolders = new Array(keys.length).fill("?"); 
    let values = Object.keys(obj).map(key => obj[key]); 
    let sql = "INSERT INTO `footTour-sgbd`.`player` (" + keys.toString() + ") VALUES (" + placeHolders.toString() + ")"; 

    sql = mysql.format(sql, values); 
    executeSql.executeSelect(res, function (rows, fields) { 
     // res.json(rows); 
     res.end('{"success" : "Updated Successfully", "status" : 200}'); 

    }, sql); 
}); 

module.exports = router; 

JS客戶端請求：

let formPlayer = createForm(formName, formName); 
    formPlayer.addEventListener("submit", function (response) { 

     let playerName = document.getElementById("name").value; 
     let playerHeight = document.getElementById("height").value; 
     let playerBirthdate = document.getElementById("birthDate").value; 
     let playerCountry = document.getElementById("countryEnum").value; 
     let playerPosition = document.getElementById("positionTypeEnum").value; 

     // let player = formToJson(formPlayer); 
     let player = new Player(playerName, playerBirthdate, playerCountry, playerHeight, playerPosition) 
     insertPlayer(
      function (response) { 
       createPlayersTable(); 

      }, function (status, response) { 

       showSnackBar(`Error creating player (${status})`, 3000); 
       createPlayersTable(); 
      }, player); 
    }); 

function insertPlayer(onSuccess, onError, data) { 

    ajaxHelper("/players/submit-player", onSuccess, onError, "POST", data); 
} 

function ajaxHelper(url, onSuccess, onError, verb, data) { 
    verb = verb || "GET"; 
    let xhr = new XMLHttpRequest(); 
    xhr.open(verb, url); 
    xhr.responseType = "json"; 
    xhr.addEventListener("load", function() { 
     if (this.status === 200) { 
      onSuccess && onSuccess(xhr.response); 
     } else { 
      onError && onError(this.status, xhr.response); 
     } 
    }); 
    if (data) { 
     xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
     xhr.send(JSON.stringify(data)); 
    } else { 
     xhr.send(); 
    } 
} 

Answer 1

嘗試在形式EventListener的添加的preventDefault（）：

formPlayer.addEventListener("submit", function (evt) { 
    evt.preventDefault(); //<-- THIS 

    let playerName = document.getElementById("name").value; 
    let playerHeight = document.getElementById("height").value; 
    let playerBirthdate = document.getElementById("birthDate").value; 
    let playerCountry = document.getElementById("countryEnum").value; 
    let playerPosition = document.getElementById("positionTypeEnum").value; 

    // let player = formToJson(formPlayer); 
    let player = new Player(playerName, playerBirthdate, playerCountry, playerHeight, playerPosition) 
    insertPlayer(
     function (response) { 
      createPlayersTable(); 

     }, function (status, response) { 

      showSnackBar(`Error creating player (${status})`, 3000); 
      createPlayersTable(); 
     }, player); 
});