jquery - JSON数据不显示
问题描述
显然,当我点击我的所有电影按钮时,什么都没有出现
$("#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 上运行此代码时,我的所有数据都显示在表格上并且工作正常,但它没有显示在我的网络浏览器上,这是我的 html 或 javascript 有问题。另外,当我在 js 上运行我的代码时,我的列之一是 thumnail_path 显示未定义。
解决方案
I believe you forgot to close the <tr>
tags in ajax
推荐阅读
- java - JButton 干扰 JPanel 上的鼠标侦听器
- openfl - 如何在塔防游戏中使用 2d 帧使炮塔指向对象?
- amazon-web-services - 如何在 AWS API Gateway HTTP 端点(http 与 https)中使用阶段变量?
- python - 如何使用python计算时间戳的平均值
- sql-server - 有条件地更改字符串名称
- javascript - JS 数组:filter() 与 map() 与 forEach()
- umbraco - Umbraco 自定义视图模型
- php - php:如何将数组中的单个值存储在单独的变量中
- java - 有没有办法通过终端命令行监控垃圾收集器?
- python - 如何在某些特定字符串之后查找字符?[化学代码]