Question

enter image description here

上面有一张图片说我的缩略图路径未定义，下面是我的代码

$(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(id, data) {
              $.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>Edit
                    </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>

所以我已经在html和javascript中定义了什么，这可能是为什么未定义thumnail_path的问题。是不是在所有电影列表中都未定义，还是我的put函数错误

Answer 1

像这样放置网址

url：“ / Controller / Method /” + id

类型错误未定义thumnail_path未定义

1 个答案: