Question

相应地，当我单击“所有电影”按钮时，没有任何显示

    $("#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);
          });
        }
      });
    });
    $("#movieAdded").click(function() {
      $.ajax({
        method:"POST",
        url: "http://localhost:3000/movielist/addMovie",
        dataType: "json",
        data: {
           idmovielist: 10,
           name: 'Bubble Gum',
           thumnail_path: 'yourieiri.jpg',
           description: 'Disturbing',
           year_released: '2007',
           language_released: 'french'
        },
        success: function (data) {
          $.each(data, 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);
          });
        }
      });
    });

    body {
      background: #20262E;
      padding: 20px;
      font-family: Helvetica;
    }

    #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://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="mycrud.js"></script>
    </head>
      <title>My Movies</title>
      <header>
        <h1>Movies</h1>
      </header>
      <body>
    <button id = "showMovies" type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">All Movies</button>
    <button id = "movieAdded" type="button" class="btn btn-danger" data-toggle="modal" data-targe="#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>

当我在jsfiddle上运行此代码时，我的所有数据都显示在表上，并且可以正常工作，但无法在我的Web浏览器上显示，这是我的html或javascript错误。当我在js上运行代码时，Alos会在我的专栏之一thumnail_path中显示未定义。

Answer 1

我相信您忘了关闭ajax中的<tr>标签

JSON数据未显示

1 个答案: