gpt4 book ai didi

jquery - 不显示 JSON 数据

转载 作者:行者123 更新时间:2023-11-28 15:38:39 26 4
gpt4 key购买 nike

UI

显然,当我点击“所有电影”按钮时,没有任何显示

    $("#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 有问题。 Alos 当我在 js fiddle 上运行我的代码时,我的列之一是 thumnail_path 显示未定义。

最佳答案

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

关于jquery - 不显示 JSON 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55549937/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com