Javascript 快速路线在单页Web应用程序上不起作用
我正在将一个旧的LAMP堆栈项目转换为使用Node/Express/MongoDB,而不是PHP/Laravel/MySQL。我建立了我的路线,就像我在拉雷维尔做的一样,并用邮递员测试了我建立的路线。通过邮递员的测试,每条路线都能正常工作 但是,当我尝试在我编写的display.js文件中使用这些路由时,唯一有效的路由是GET/players。我正在寻找一些关于这些路线和我正在使用的显示文件的见解 当我单击编辑按钮时,我的GET/player/:id路由会获取正确的信息(状态代码200,预览显示JSON对象),但不会填充表单中的字段 当我点击删除按钮时,我得到一个404状态代码,响应为“Cannot get/players/123/delete”。如何调整显示代码以使用DELETE而不是GET?(如果我能在display.js代码中找到如何传递请求方法,我相信我可以使用正确的http请求方法将我的所有路由重构为just/players/:id) 当我尝试提交一个新记录时,我得到一个400状态代码,带有验证错误,表示PathJavascript 快速路线在单页Web应用程序上不起作用,javascript,jquery,ajax,node.js,express,Javascript,Jquery,Ajax,Node.js,Express,我正在将一个旧的LAMP堆栈项目转换为使用Node/Express/MongoDB,而不是PHP/Laravel/MySQL。我建立了我的路线,就像我在拉雷维尔做的一样,并用邮递员测试了我建立的路线。通过邮递员的测试,每条路线都能正常工作 但是,当我尝试在我编写的display.js文件中使用这些路由时,唯一有效的路由是GET/players。我正在寻找一些关于这些路线和我正在使用的显示文件的见解 当我单击编辑按钮时,我的GET/player/:id路由会获取正确的信息(状态代码200,预览显示
age
是必需的。实际上,每个字段名都有相同的错误,因此我假设没有将字段中的值正确地传递到JSON对象中
我还不能测试这个补丁,但我相信应该通过修复DELETE/players/:id和GET/players/:id来修复它
感谢您的帮助。下面是显示和服务器js文件的代码
display.js
// this is the base url to which all your requests will be made
var baseURL = window.location.origin;
$(document).ready(function(){
// $.ajaxSetup({
// headers: {
// 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
// }
// });
$('#table').click(function(event) { // generates the table
// change the url parameters based on your API here
// Using an JQuery AJAX GET request to get data form the server
$.getJSON(baseURL+'/players', function(data) {
generateTable(data, $('#container'));
});
});
$('#form').click(function(event) {
// creating an empty form
generateForm(null, $('#container'));
});
// Handle table click event for delete
$('#container').on('click', '.delete', function(event) {
var id = $(this).val();
// change the url parameters based on your API here
// remember to create delete functionality on the server side (Model and Controller)
// Using an JQuery AJAX GET request to get data form the server
$.getJSON(baseURL+"/players/"+id+"/delete", function(data) {
//Generate table again after delete
//change the url based on your API parameters here
// Using an JQuery AJAX GET request to get data from the server
$.getJSON(baseURL+'/players', function(data) {
generateTable(data, $('#container'));
});
});
});
// Handle form submit event for both update & create
// if the ID_FIELD is present the server would update the database otherwise the server would create a record in the database
$('#container').on('submit', '#my-form', function(event) {
var id = $('#id').val();
console.log(id);
if (id != "") {
event.preventDefault();
submitForm(baseURL+"/players/"+id+"/edit", $(this));
} else {
event.preventDefault();
submitForm(baseURL+"/player", $(this));
}
});
// Handle table click event for edit
// generates form with prefilled values
$('#container').on('click', '.edit', function(event) {
// getting id to make the AJAX request
var id = $(this).val();
// change the url parameters based on your API here
// Using an JQuery AJAX GET request to get data form the server
$.getJSON(baseURL+'/players/'+id, function(data) {
generateForm(data, $('#container'));
});
});
// function to generate table
function generateTable(data, target) {
clearContainer(target);
//Change the table according to your data
var tableHtml = '<table><thead><tr><th>Name</th><th>Age</th><th>Position</th><th>Team</th><th>Delete</th><th>Edit</th></tr></thead>';
$.each(data, function(index, val) {
tableHtml += '<tr><td>'+val.playername+'</td><td>'+val.age+'</td><td>'+val.position+'</td><td>'+val.team+'</td><td><button class="delete" value="'+val._id+'">Delete</button></td><td><button class="edit" value="'+val._id+'">Edit</button></td></tr>';
});
tableHtml += '</table>';
$(target).append(tableHtml);
}
// function to generate form
function generateForm(data, target){
clearContainer(target);
//Change form according to your fields
$(target).append('<form id="my-form"></form>');
var innerForm = '<fieldset><legend>Player Form</legend><p><label>Player Name: </label>'+'<input type="hidden" name="id" id="id"/>'+'<input type="text" name="playername" id="playername" /></p>' + '<p><label>Age: </label><input type="text" name="age" id="age" /></p>'+ '<p><label>Hometown: </label><input type="text" name="city" id="city" />'+ ' ' + '<input type="text" name="country" id="country" /></p>' + '<p><label>Gender: </label><input type="text" name="gender" id="gender" /></p>'+ '<p><label>Handedness: </label><input type="text" name="handedness" id="handedness" /></p>'+ '<p><label>Broom: </label><input type="text" name="broom" id="broom" /></p>'+ '<p><label>Position: </label><input type="text" name="position" id="position" /></p>'+ '<p><label>Team: </label><input type="text" name="team" id="team" /></p>'+ '<p><label>Favorite Color: </label><input type="text" name="favoritecolor" id="favoritecolor" /></p>'+ '<p><label>Headshot: </label><input type="text" name="headshot" id="Headshot" /></p>'+ '<input type="submit"/>';
$('#my-form').append(innerForm);
//Change values according to your data
if(data != null){
$.each(data, function(index, val) {
$('#id').val(val._id);
$('#playername').val(val.playername);
$('#age').val(val.age);
$('#city').val(val.city);
$('#country').val(val.country);
$('#gender').val(val.gender);
$('#handedness').val(val.handedness);
$('#broom').val(val.broom);
$('#position').val(val.position);
$('#team').val(val.team);
$('#favoritecolor').val(val.favoritecolor);
$('#Headshot').val(val.headshot);
});
}
}
function submitForm(url, form){
$.post(url, form.serialize(), function(data) {
showNotification(data, $('#notification'));
});
}
function showNotification(data, target){
clearContainer(target);
target.append('<p>'+data+'</p>');
}
function clearContainer(container){
container.html('');
}
});
尝试res.json(播放器)代码>而不是res.send(播放器)
以JSON格式发送数据
另外,不要使用$.post(url,form.serialize(),function(data){
尝试使用中的代码以JSON格式发送数据
当我点击删除按钮时,我得到一个404状态代码,响应为“无法获取/players/123/delete”。如何调整我的显示代码以使用delete而不是get?(如果我能在display.js代码中找到如何传递请求方法,我相信我可以使用正确的http请求方法将我的所有路由重构为just/players/:id)
这是因为你的应用程序有app.delete('/players/:id/delete')
,而不是app.get('/players/:id/delete')
。但是,你的服务器端代码不应该有太大变化,只需做一个调整:
- 如果您有一个
app.delete()
,那么实际上就不需要在资源末尾使用动词delete
您还需要使用HTTP方法DELETE
发出请求,而不是在display.js
中发出GET
。只需使用$.ajax()
发出DELETE
请求,并将类型设置为'DELETE'
当我单击编辑按钮时,我的GET/player/:id路由会获取正确的信息(状态代码200,预览显示JSON对象),但不会填充表单中的字段
这是因为您的$实现。each()
假定数据
始终是一个数组,而不是一个对象,但是,您的generateForm()
正在传入一个播放器对象。请更改$。each()
以执行数组处理和对象处理的类型检查。请参阅下面的更改
当我尝试提交一个新记录时,我得到一个400状态代码,其中有一个验证错误,表示需要使用路径年龄。每个字段名的错误实际上是相同的,因此我假设我没有将字段中的值正确地传递到JSON对象中
如果您对generateForm()
进行上述更改,则应该可以解决此问题
只需将下面的代码片段替换为应用程序中的那些部分,就可以了
server.js
display.js
//处理更新和创建的表单提交事件
//如果ID_字段存在,服务器将更新数据库,否则服务器将在数据库中创建记录
$('#container')。在('submit','#my form',函数(事件)上{
var id=$('#id').val();
设formData={};
$.each($('#myForm').serializeArray(),函数(35;,kv){
if(formData.hasOwnProperty(kv.name)){
formData[kv.name]=$.makeArray(formData[kv.name]);
formData[kv.name].push(kv.value);
}
否则{
formData[kv.名称]=kv.值;
}
});
console.log(id);
如果(id!=“”){
event.preventDefault();
$.ajax({
url:baseURL+'/players/'+id,
键入:“补丁”,
成功:功能(已编辑){
//句柄返回已编辑的播放机
}
})
}否则{
event.preventDefault();
$.ajax({
url:baseURL+'/players',
键入:“POST”,
成功:功能(已创建){
//手柄创建的播放器
}
})
}
});
//用于删除的句柄表单击事件
$(“#容器”)。在('click','delete',函数(事件){
var id=$(this.val();
//在此根据API更改url参数
//记住在服务器端(模型和控制器)创建删除功能
//使用jqueryajaxget请求从服务器获取数据
$.ajax({
url:baseURL+'/players/'+id,
键入:“删除”,
成功:功能(数据){
//删除后重新生成表
//在此根据API参数更改url
//使用jqueryajaxget请求从服务器获取数据
$.getJSON(baseURL+/players',函数(数据){
generateTable(数据,$(“#容器”);
});
}
});
});
//函数生成表单
函数generateForm(数据、目标){
clearContainer(目标);
//根据您的字段更改表单
$(目标)。追加(“”);
var innerForm='球员形式球员姓名:'++'>'++'年龄:'++'家乡:'++''+'性别:'+
const _ = require('lodash');
const {ObjectID} = require('mongodb');
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
var {mongoose} = require('./db/mongoose');
var {Player} = require('./models/player');
var app = express();
const port = process.env.PORT || 3000;
app.use(express.static(__dirname+'./../public'));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.sendFile('index.html');
});
app.post('/player', (req, res) => {
var player = new Player({
playername: req.body.playername,
age: req.body.age,
city: req.body.city,
country: req.body.country,
gender: req.body.gender,
handedness: req.body.handedness,
broom: req.body.broom,
position: req.body.position,
team: req.body.team,
favoritecolor: req.body.favoritecolor,
headshot: req.body.headshot
});
player.save().then((doc) => {
res.send(doc);
}, (e) => {
res.status(400).send(e);
});
});
app.get('/players', (req, res) => {
Player.find().then((players) => {
res.send(players);
}, (e) => {
res.status(400).send(e);
});
});
app.get('/players/:id', (req, res) => {
var id = req.params.id;
if (!ObjectID.isValid(id)) {
return res.status(404).send();
}
Player.findById(id).then((player) => {
if (player) {
res.send(player);
} else {
return res.status(404).send();
}
}).catch((e) => {
res.status(400).send();
});
});
app.delete('/players/:id/delete', (req, res) => {
var id = req.params.id;
if (!ObjectID.isValid(id)) {
return res.status(404).send();
}
Player.findByIdAndRemove(id).then((player) => {
if (player) {
res.send(player);
} else {
return res.status(404).send();
}
}).catch((e) => {
res.status(400).send();
});
});
app.patch('/players/:id/edit', (req, res) => {
var id = req.params.id;
var body = _.pick(req.body, ['playername', 'age', 'city', 'country', 'gender', 'handedness', 'broom', 'position', 'team', 'favoritecolor', 'headshot']);
if (!ObjectID.isValid(id)) {
return res.status(404).send();
}
Player.findByIdAndUpdate(id, {$set: body}, {new: true}).then((player) => {
if (!player) {
return res.status(404).send();
} else {
res.send(player);
}
}).catch((e) => {
res.status(400).send();
})
});
app.listen(port, () => {
console.log(`Started on port ${port}`);
});
module.exports = {app};
app.delete('/players/:id', (req, res) => {
var id = req.params.id;
if (!ObjectID.isValid(id)) {
return res.status(404).send();
}
return Player.findByIdAndRemove(id).then((player) => {
if (player) {
res.status(200).json(player);
} else {
return res.status(404).send();
}
}).catch((e) => {
res.status(400).send();
});
});
app.patch('/players/:id', (req, res) => {
var id = req.params.id;
var body = _.pick(req.body, ['playername', 'age', 'city', 'country', 'gender', 'handedness', 'broom', 'position', 'team', 'favoritecolor', 'headshot']);
if (!ObjectID.isValid(id)) {
return res.status(404).send();
}
Player.findByIdAndUpdate(id, {$set: body}, {new: true}).then((player) => {
if (!player) {
return res.status(404).send();
} else {
res.status(200).json(player);
}
}).catch((e) => {
res.status(400).send();
})
});
app.post('/players', (req, res) => {
var player = new Player({
playername: req.body.playername,
age: req.body.age,
city: req.body.city,
country: req.body.country,
gender: req.body.gender,
handedness: req.body.handedness,
broom: req.body.broom,
position: req.body.position,
team: req.body.team,
favoritecolor: req.body.favoritecolor,
headshot: req.body.headshot
});
return player.save().then((doc) => {
return res.status(200).json(doc);
}, (e) => {a
return res.status(400).send(e);
});
});
// Handle form submit event for both update & create
// if the ID_FIELD is present the server would update the database otherwise the server would create a record in the database
$('#container').on('submit', '#my-form', function(event) {
var id = $('#id').val();
let formData = {};
$.each($('#myForm').serializeArray(), function(_, kv) {
if (formData.hasOwnProperty(kv.name)) {
formData[kv.name] = $.makeArray(formData[kv.name]);
formData[kv.name].push(kv.value);
}
else {
formData[kv.name] = kv.value;
}
});
console.log(id);
if (id != "") {
event.preventDefault();
$.ajax({
url: baseURL + '/players/' + id,
type: 'PATCH',
success: function(edited) {
// Handle returned edited player
}
})
} else {
event.preventDefault();
$.ajax({
url: baseURL + '/players',
type: 'POST',
success: function(created) {
// Handle created player
}
})
}
});
// Handle table click event for delete
$('#container').on('click', '.delete', function(event) {
var id = $(this).val();
// change the url parameters based on your API here
// remember to create delete functionality on the server side (Model and Controller)
// Using an JQuery AJAX GET request to get data form the server
$.ajax({
url: baseURL + '/players/' + id,
type: 'DELETE',
success: function(data) {
//Generate table again after delete
//change the url based on your API parameters here
// Using an JQuery AJAX GET request to get data from the server
$.getJSON(baseURL+'/players', function(data) {
generateTable(data, $('#container'));
});
}
});
});
// function to generate form
function generateForm(data, target){
clearContainer(target);
//Change form according to your fields
$(target).append('<form id="my-form"></form>');
var innerForm = '<fieldset><legend>Player Form</legend><p><label>Player Name: </label>'+'<input type="hidden" name="id" id="id"/>'+'<input type="text" name="playername" id="playername" /></p>' + '<p><label>Age: </label><input type="text" name="age" id="age" /></p>'+ '<p><label>Hometown: </label><input type="text" name="city" id="city" />'+ ' ' + '<input type="text" name="country" id="country" /></p>' + '<p><label>Gender: </label><input type="text" name="gender" id="gender" /></p>'+ '<p><label>Handedness: </label><input type="text" name="handedness" id="handedness" /></p>'+ '<p><label>Broom: </label><input type="text" name="broom" id="broom" /></p>'+ '<p><label>Position: </label><input type="text" name="position" id="position" /></p>'+ '<p><label>Team: </label><input type="text" name="team" id="team" /></p>'+ '<p><label>Favorite Color: </label><input type="text" name="favoritecolor" id="favoritecolor" /></p>'+ '<p><label>Headshot: </label><input type="text" name="headshot" id="Headshot" /></p>'+ '<input type="submit"/>';
$('#my-form').append(innerForm);
//Change values according to your data
if(data instanceof Array){
$.each(data, function(index, val) {
$('#id').val(val._id);
$('#playername').val(val.playername);
$('#age').val(val.age);
$('#city').val(val.city);
$('#country').val(val.country);
$('#gender').val(val.gender);
$('#handedness').val(val.handedness);
$('#broom').val(val.broom);
$('#position').val(val.position);
$('#team').val(val.team);
$('#favoritecolor').val(val.favoritecolor);
$('#Headshot').val(val.headshot);
});
}
else if (typeof data === 'object') {
$.each(data, function(key, value) => {
$('#' + key).val(value);
});
}
}