如何发布和删除请求前端用户界面

时间:2019-04-18 22:12:27

标签: jquery crud

因此,我试图在前端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);
            }
        });
    }

});
因此,这是我在jquery中的代码,如果您需要查看这些代码,请在html中创建一个更新表单,也请让我知道我是否在丢失某些内容或某些内容未定义

0 个答案:

没有答案