[英]Doing a post request only in Front end
$(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-script，而且我有一个我的UI的屏幕截图我已经做了一个post post请求后端，我也在前端执行它，当我点击添加按钮时模态表格弹出关于我想要添加的内容是否有一种方法我只能在前端执行发布请求而不必返回到后端并且每次都更改它
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看到的结果是他们的但是如果我想要添加更多的电影是否有一种方法我可以在前端添加电影而不必返回所有时间到后端改变它
mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('64','DudeLove','wfburfr.jpg','silly','2019','english')",
您已经对要插入查询的值进行了硬编码。
不要那样做。 从POST请求中读取值 。
当您使用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+"')",
无法从前端客户端向本地节点服务器发出 fetch post 请求，只有 GET 请求有效
[英]Cant make a fetch post request from front end client to local node server, only GET requests work
无法从 React 前端向 Node.js 后端发送 POST 请求
[英]Can't send POST request from React front-end to Node.js back-end
将请求发布到 SPRING 引导应用程序无法从 Jquery（前端）工作，但从 POSTMAN 可以正常工作
[英]Post request to SPRING BOOT APPLICATION not working from Jquery(front-end) but works perfectly from POSTMAN
如何在前端javascript上接收通过post请求提交的表单数据
[英]How to receive form-data submitted through post request on front-end javascript
我可以在前端 Javascript 代码中访问附加到外部 POST 请求的 FormData 吗？ （圣人支付）
[英]Can I access FormData which is attached to an external POST request in my front end Javascript code? (SagePay)
如何从反应前端向节点后端发出发布请求？ 获得 404
[英]How do I make a post request from a react front-end to a node back-end? Getting 404
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.