在前端进行PUT和DELETE

时间：2019-04-18 17:08:41

标签： jquery crud

我上面有快照，我正在尝试执行放置请求，但没有任何效果，也没有收到错误消息，我也想在前端执行删除请求，但是当我单击删除按钮时，表格出现。您可能还会注意到，我在同一弹出窗口中有两个表单，我需要有关如何解决该问题的帮助

app.delete('/movielist/:id',(req,res) => {
    mysqlConnection.query("DELETE FROM movielist WHERE idmovielist = ?",[req.params.id],(err,rows,fields) =>{
      if (!err) {
        res.send("Movie is deleted");
      } else {
      console.log(err);
    }
    });
  });
app.put('/movielist/:id',(req,res) =>{
let update = req.body;
mysqlConnection.query("UPDATE movielist SET `year_released` WHERE = '"+update.idmovielist+"'",
(err, results)  => {
    if (!err) {
      res.send("Movie list is updated");
    } else {
      console.log(err);
    }
});
});

上面我有一个删除并将请求显示在后端，我将在下面向大家展示我的前端代码

  $(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();
        }
      });
    });
    $("#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 getOneMovie(id){
           $.ajax({
               url: 'http://localhost:3000/movielist' + id,
               method: 'get',
               dataType: 'json',
               success: function(data) {
                   $($("#updateForm")[0].intNum).val(data._id);
                   $($("#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();
               }
           });
       }
    function loadButton() {
            $(".editMovie").click(function(e){
                getOneMovie($($(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].intNum).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);
                }
            });
        }

    });

<!-- language: lang-css -->

    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }
    table {
      background-color: lightblue;
    }
    tbody {
      font-family: inherit;
    }
    html {
      background-color: lightblue;
    }

    #banner-message {
      background: #fff;
      border-radius: 4px;
      padding: 20px;
      font-size: 25px;
      text-align: center;
      transition: all 0.2s;
      margin: 0 auto;
      width: 300px;
    }

    button {
      background: #0084ff;
      border: none;
      border-radius: 5px;
      padding: 8px 14px;
      font-size: 15px;
      color: #fff;
    }

    #banner-message.alt {
      background: #0084ff;
      color: #fff;
      margin-top: 40px;
      width: 200px;
    }

    #banner-message.alt button {
      background: #fff;
      color: #000;
    }


<!-- language: lang-html -->

    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
    <link href="mystyle.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="mycrud.js"></script>
    </head>
    <body>
      <title>My Movies</title>
      <header>
        <h1>Movies</h1>
        <button id = "showMovies" type="button" class="btn btn-primary"  data-toggle="modal"
        data-target=#exampleModal>All Movies</button>
      </header>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class = "modal-body">
              <form id="newForm">
                <div class="form-group row">
                  <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
                    </div>
                </div>
                <div class="form-group row">
                  <label for="name" class="col-sm-2 col-form-label">name</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="name" placeholder="name">
                    </div>
                </div>
                <div class="form-group row">
                  <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
                    </div>
                </div>
                <div class="form-group row">
                  <label for="description" class="col-sm-2 col-form-label">description</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="description" placeholder="description">
                    </div>
                </div>
                <div class="form-group row">
                  <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="year_released" placeholder="year_released">
                    </div>
                </div>
                <div class="form-group row">
                  <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" id="language_released" placeholder="language_released">
                    </div>
                </div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id = "movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
                data-target=#exampleModal>Add</button>
              </form>
            </div>
         <div class = "modal=body">
        <form id="updateForm">
            <div class="form-group row">
              <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
                </div>
            </div>
            <div class="form-group row">
              <label for="name" class="col-sm-2 col-form-label">name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="name" placeholder="name">
                </div>
            </div>
            <div class="form-group row">
              <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
                </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-2 col-form-label">description</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="description" placeholder="description">
                </div>
            </div>
            <div class="form-group row">
              <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="year_released" placeholder="year_released">
                </div>
            </div>
            <div class="form-group row">
              <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="language_released" placeholder="language_released">
                </div>

            </div>
            <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id = "updataMovie" type="button" class="btn btn-primary" data-toggle="modal"
                    data-target=#exampleModal>Update</button>
                  </div>
               </div>
          </form>
    </div>
          </div>
        </div>
      </div>
    <button id = "movieAdded" type="button" class="btn btn-primary" data-toggle="modal"
    data-target=#exampleModal>Add</button>
    <table class="table table-bordered table-hover" width="100%">
      <thead style="background-color:#ddd;" class="table-borderless">
        <tr>
          <th>idmovielist</th>
          <th>name</th>
          <th>thumnail_path</th>
          <th>description</th>
          <th>year_released</th>
          <th>language_released</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="movies">
      </tbody>
    </table>
    </header>
    </body>
    </html>

我在前端也删除了put ang，我也为更新创建了一个单独的表单，我想删除该项目并通过idmovielist更新列表。我已经在前端进行了获取和发布工作，服务器端是否已经有些破损，或者前端是否有某些东西。

0 个答案:

没有答案
相关问题
最新问题