仅在前端执行发布请求
阿迪尔阿里 |
$(function() {
$("#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(a) {
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);
$("#newForm").trigger("reset");
$("#newForm").toggle();
a.preventDefault();
});
function displayMovie(data) {
$.ajax({
method: "POST",
url: "http://localhost:3000/movielist/addMovie",
dataType: "json",
data: data,
success: function(data) {
console.log(data);
}
});
}
$.ajax({
method: "DELETE",
url: "http://localhost:3000/movielist/5",
dataType: "json",
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;
}
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;
}<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>
</head>
<body>
<title>My Movies</title>
<header>
<h1>Movies</h1>
<button id="showMovies" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal>All Movies</button>
</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">×</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>
<div class="modal-footer">
<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>
</div>
</form>
</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%">
<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>
</header>
</body>
</html>
所以上面是我的 html css 和 java 脚本，还有我的用户界面的屏幕截图我做了一个发布请求后端，我也在前端执行它，当我点击添加按钮时，模态表单弹出关于我想要添加的内容，有没有一种方法可以让我只在前端进行发布请求，而不必每次都返回到后端进行更改
app.post('/movielist/addMovie',(req, res) => {
mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('64','DudeLove','wfburfr.jpg','silly','2019','english')",
req.body,
(err,rows) => {
if (!err) {
res.send("Movie is added");
} else {
console.log(err);
}
});
});
上面是我做的后端代码，你在 Ui 中看到结果是他们的但是如果我想添加更多电影有没有办法我可以只在前端添加电影而不必返回所有是时候到后端更改它了
迈克
当您使用POST方法时，您必须在 POST 的正文中传递参数并在服务器端读取它们。
您的客户端是正确的 - 您传递data给服务器。
$.ajax({
method: "POST",
url: "http://localhost:3000/movielist/addMovie",
dataType: "json",
data: data,
success: function(data) {
console.log(data);
}
});
在服务器端，您使用req.body.PARAMNAME;读取 POST 正文数据元素；
当您将它们作为 JSON 传递时，它们将已经被解析。
所以现在您只需将这些值动态放入查询中：
"INSERT INTO movielist (`idmovielist`,`name`) VALUES ('"+req.body.idmovielist+"', '"+req.body.name+"')",
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Laravel如何通过Ajax搜索按名称或ID仅在前端显示用户帐户的附加患者
- 2
单击错误时出现的Joomla分页错误“未定义Joomla”仅在前端
- 3
我的大多数API在前端调用时都返回400错误的请求错误
- 4
在前端PUT请求中返回Internal Server 500错误 Django Vue
- 5
如何设计执行繁重任务并在前端显示结果的应用（例如Google Search Console）
- 6
从ui前端发送发布请求时，发布请求消息未在应用中显示
- 7
仅在状态更新时执行获取请求
- 8
在前端处理异步代码
- 9
在指令前执行http发布请求
- 10
Laravel过滤路由组，但仅在发布请求中
- 11
提交不执行HTTP发布，而是执行HTTP获取/请求
- 12
提交不执行HTTP发布，而是执行HTTP获取/请求
- 13
为什么此ajax发布请求在Nodejs express中执行发布请求之前就立即使用数据执行GET请求？
- 14
WordPress管理栏未显示在前端
- 15
在前端的帖子中更新Likes数组
- 16
如何在前端显示websocket数据？
- 17
产品未在前端reactjs中显示
- 18
Magento：在前端显示禁用的产品
- 19
Symfony在前端添加表单字段
- 20
模块后端参数未在前端显示
- 21
主题更改后，插件在前端消失
- 22
在前端使用的后端查找代码
- 23
AngularJS表单未显示在前端
- 24
我可以在前端查看吗？
- 25
角度变量未在前端更新
- 26
在前端编码（用于游戏）以保密
- 27
Wordpress Acf 字段未显示在前端
- 28
在前端实现用户登录
- 29
在前端处理后端错误状态
我来说两句