因此,我试图在前端UI上执行put方法和delete方法,但是我能够使GET和POST正常工作,但是我尝试执行PUT和DELETE,无论何时执行PUT都不会执行没有错误消息显示在控制台上,并且我在Web浏览器中启用了CORS
$(function(){
$("#showMovies").click(function() {
$.ajax({
method:"GET",
url: "http://localhost:3000/movielist",
dataType: "json",
success: function (response) {
$.each(response, function(i, movie) {
const rowText = "<tr>" +
"<td>" + movie.idmovielist + "</td>" +
"<td>" + movie.name + "</td>" +
"<td>" + movie.thumbnail_path + "</td>" +
"<td>" + movie.description + "</td>" +
"<td>" + movie.year_released + "</td>" +
"<td>" + movie.language_released + "</td>" +
"<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Delete</button>" + "</td>" +
"<td>" + "<button button id = \"editMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Edit</button>" + "</td>";
$("#movies").append(rowText);
});
loadButton();
}
});
});
function getOneMovie(id){
$.ajax({
url: 'http://localhost:3000/movielist' + id,
method: 'get',
dataType: 'json',
success: function(data) {
$($("#updateForm")[0].movieId).val(data._id);
$($("#updateForm")[0].intNum).val(data.intNum);
$($("#updateForm")[0].name).val(data.name);
$($("#updateForm")[0].thumnail_path).val(data.thumnail_path);
$($("#updateForm")[0].description).val(data.description);
$($("#updateForm")[0].year_released).val(data.year_released);
$($("#updateForm")[0].language_released).val(data.language_released);
$("#updateForm").show();
}
});
}
$("#movieAdded").click(function(a){
let mydata = {
idmovielist: $($("#newForm")[0].intNum).val(),
name:$($("#newForm")[0].name).val(),
thumnail_path:$($("#newForm")[0].thumnail_path).val(),
description:$($("#newForm")[0].description).val(),
year_released:$($("#newForm")[0].year_released).val(),
language_released:$($("#newForm")[0].language_released).val(),
}
displayMovie(mydata);
$("#newForm").trigger("reset");
$("#newForm").toggle();
a.preventDefault();
});
function displayMovie(data) {
$.ajax({
method:"POST",
url: "http://localhost:3000/movielist/addMovie",
dataType: "json",
data: data,
success: function (data) {
console.log(data);
}
});
}
function loadButton() {
$(".editMovie").click(function(e){
($(this)[0]).data("idmovielist");
e.preventDefault();
});
$(".deleteMovie").click(function(e){
deleteTutorial($($(this)[0]).data("idmovielist"));
e.preventDefault();
});
}
function putTutorial(data){
$.ajax({
url: 'http://localhost:3000/movielist/update/3',
method: 'PUT',
dataType: 'json',
data: data,
success: function(data) {
console.log(data);
getOneMovie();
}
});
}
$("#updateMovie").on("click", function(e) {
let data = {
idmovielist: $($("#updateForm")[0].intNum).val(),
name:$($("#updateForm")[0].name).val(),
thumnail_path:$($("#updataForm")[0].thumnail_path).val(),
description:$($("#updateForm")[0].description).val(),
year_released:$($("#updateForm")[0].year_released).val(),
language_released:$($("#updateForm")[0].language_released).val(),
}
putTutorial($($("#updateForm")[0].movieId).val(), data);
$("#updateForm").trigger("reset");
$("#updateForm").toggle();
e.preventDefault();
});
function deleteMovie(id){
$.ajax({
url: "http://localhost:3000/movielist/" + id,
method: 'DELETE',
dataType: 'json',
success: function(data) {
console.log(data);
}
});
}
});