Question

enter image description here

上面是我的PUT方法的屏幕快照，无论何时执行，我的网络标签都没有任何响应，而且当我单击更新时，我会弹出一个附加模式。在下面，我将向您展示我在节点js中的前端和后端。

    $(function(){
          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) {
                console.log("movieAdded Click")
                  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);
                  console.log("Hidden")
                  $("#newForm").trigger("reset");
                  $("#newForm").toggle();
                  console.log("Hidden")
                  a.preventDefault();
              });
              function displayMovie(mydata) {
                  $.ajax({
                      method: "POST",
                      url: "http://localhost:3000/movielist/addMovie",
                      dataType: "json",
                      data: mydata,
                      success: function (data) {
                          console.log(data);
                      }
                  });
              }

              function loadButton() {
                  $(".editMovie").click(function (a) {
                      getOneMovie($($(this)[0]).data("movieId"));
                      a.preventDefault();
                  });

                  $(".deleteMovie").click(function (a) {
                      deleteMovie($($(this)[0]).data("movieId"));
                      a.preventDefault();
                  });
              }
                 loadButton();
              function putMovie(data, id) {
                  $.ajax({
                      url: "http://localhost:3000/movielist/updateMovie/" + id,
                      method: 'PUT',
                      dataType: 'json',
                      data: data,
                      success: function (data) {
                        console.log(data);
                        getOneMovie();
                      }
                  });
              }

              $("#updataMovie").on("click", function (a) {
                  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(),
                  }

                  putMovie($($("#updateForm")[0].movieId).val(), data);
                  $("#updateForm").trigger("reset");
                  $("#updateForm").toggle();
                  a.preventDefault();

              });


              function deleteMovie(id) {
                  $.ajax({
                      url: "http://localhost:3000/movielist/" + id,
                      method: 'DELETE',
                      dataType: 'json',
                      success: function (data) {
                          console.log(data);
                      }
                  });
              }

    });

    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;
    }

    <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>
    <script>
    $.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=\"#exampleModal2\">Delete</button>" + "</td>" +
            "<td>" + "<button button id = \"editMovie\" type=\"button\"  class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal2\">Edit</button>" + "</td>";
          $("#movies").append(rowText);
        });
      }
    });
    </script>
    </head>
    <body>
    <title>My Movies</title>
    <header>
        <h1>Movies</h1>
    </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>
        </div>
    </div>

    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel2">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="updateForm">
                        <div class="form-group row">
                            <div class="col-sm-10">
                                <input type="hidden" class="form-control" id="movieId">
                            </div>
                        </div>

                        <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 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>
                    </form>

                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button id="updateMovie" type="button" class="btn btn-primary" data-toggle="modal"
                                data-target=#exampleModal>Update
                        </button>
                </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%">
      </button>
        <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>
    </body>
    </html>

const express = require('express');
const app = express();
const mysql = require('mysql');
const bodyparser = require('body-parser');
app.use(bodyparser.urlencoded({ extended: true }));
app.use(bodyparser.json());
const mysqlConnection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'Adil@123',
  database: 'movies'

});
mysqlConnection.connect(err=>{
  if (err) {
    console.log('It was not successful \n Error:' + JSON.stringify(err,undefined,2));
  } else {
    console.log('Its a success');
  }
  });
 //  Collecting all the movies from the movielist
  app.get('/movielist',(req,res)=> {
    mysqlConnection.query("SELECT * FROM movielist", (err, rows,fields)=> {
      if (!err) {
        res.send(rows);
      } else {
        console.log(err);
      }
    });
  });
 // Finding a movie based on the `idmovielist` number
   app.get('/movielist',(req,res) => {
    mysqlConnection.query("SELECT * FROM movielist WHERE idmovielist = ?",[req.params.id],(err, rows,fields) =>{
    if (!err) {
      res.send(rows);
    } else {
    console.log(err);
    }
    });
  });

  // Delting a movie
   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);
    }
    });
  });
  // Inserting a movie
  app.post('/movielist/addMovie',(req, res) => {
    //console.log("movielist/addMovie : ",req.body);
   mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('"+req.body.idmovielist+"', '"+req.body.name+"','"+req.body.thumnail_path+"', '"+req.body.description+"', '"+req.body.year_released+"', '"+req.body.language_released+"')",
   (err,rows) => {
     if (!err) {
       res.send("Movie is added");
     } else {
       console.log(err);
     }
  });
});

app.put('/movielist/updateMovie/:id',(req,res) =>{
  const update = req.body;
  mysqlConnection.query("UPDATE movielist SET ? WHERE idmovielist = ?",[update], function (err, results) {
    if (!err) {
      res.send("Movie list is updated");
    } else {
      console.log(err);
    }
  });
});

// localhost:3000
app.listen(3000,() => {
  console.log('We got it running');
});
module.exports = app;

所以我有我的app.js，这是我的Node js，还有我的带有html css和jQuery的前端代码。我看了无数视频，研究了如何通过前端执行put方法，但没有一个回答我的问题。可能是我的编辑按钮没有任何反应

在CRUD UI上放置方法

0 个答案: