提交 AJAX 和 Springboot 值答案

【问题标题】：Submit AJAX and Springboot values提交 AJAX 和 Springboot 值
【发布时间】：2020-10-22 08:18:57
【问题描述】：

我想使用 AJAX 将 URI 值发送到数据库，并且请求是用 @Controller 编写的。但是当我点击提交时，数据库中没有任何内容。例如我有地址：

http://localhost:8080/post/view/2

如上所述，我希望每次单击提交时都将值 2 保存到我的数据库中。我试过了，但什么都没有

@控制器

 @RequestMapping(value="post/view/{id}", method= RequestMethod.POST, produces = "apllication/json")
    public @ResponseBody Comment newComment (@RequestParam(name="id") Long id)  {
     Comment comment = new Comment();
     
        
        Post postView = postService.findById(id);
         
        
        comment.setPoster(postView);
        commentService.create(comment);
        return comment;     
    }

还有我的代码 HTML

view.html

<!DOCTYPE html>
     <html xmlns:th="http://www.thymeleaf.org">

    <head >
     <script type="text/javascript" language="javascript" 
    src="https://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>
   <script type="text/javascript" 
   src="https://www.technicalkeeda.com/js/javascripts/plugin/json2.js"> 
   </script>
    <title th:text="${postView.title}">View Post</title>
   <script >
  function madeAjaxCall(){
   $.ajax({
    type: "post",
    url: "http://localhost:3313/post/view/{id}"
    
   
       }
        </script>
      </head>

   <body>
   <div>
    <form  method="post" >
   <main id="posts">
  <article>
    <h2 class="title" th:text="${postView.title}">Post Title</h2>
    <div class="date">
        <i>Posted on</i>
       
        <span th:if="${postView.author}" th:remove="tag">
            <i>by</i>
            <span th:text="${ postView.author.lastName}">Svetlin Nakov</span>
        </span>
    </div>
   
  </article>
  

 
  
   <input type="button" value="Ajax Submit" onclick="madeAjaxCall();"/>
   </main>
   </form>

   </div>
    </body>

   </html>

我认为我在 AJAX 或 @Controller 上错了或遗漏了一些东西。谢谢

【问题讨论】：

你有没有设置断点，一步步跑过控制器？

标签： java ajax spring

【解决方案1】：

尝试使用@PathVariable 而不是@RequestParam

【讨论】：

奇怪...您是否尝试过使用 curl 命令和 POST http://localhost:8080/post/view/2 ？我想知道是控制器问题还是 HTML 问题，因为我不确定您的 html(javascript) 代码如何为 {id} 设置值。

【解决方案2】：

我注意到您的代码中有几处错误：

https://www.technicalkeeda.com/js/javascripts/plugin/jquery.js此链接无效。尝试使用官方网站的 jQuery：https://code.jquery.com/jquery-3.5.1.js
这可能不是您的服务器 URL url: "http://localhost:3313/post/view/{id}"。请确认端口为 3313，并为{id} 提供有效值。此外，您根本不需要使用端口和 url。请参阅下面的代码：
produces = "apllication/json" 你这里有错字。改成produces = MediaType.APPLICATION_JSON_VALUE
您正在使用@RequestParam，但您的请求在路径中有id 参数。查找@RequestParam 和@PathParam 之间的区别。 (@RequestParam(name="id") Long id) {你应该使用@PathVariable

这是一个有效的代码：

后端控制器：

    @PostMapping(value = "/post/view/{id}", produces = MediaType.APPLICATION_JSON_VALUE)
    public @ResponseBody
    void newComment(@PathVariable Long id) {
        System.out.println("Requested with id = " + id);
    }

前端：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<body>
<script>
    function madeAjaxCall() {
        $.ajax({
            type: "post",
            url: "/post/view/5"
        })
    }
</script>

<input type="button" value="Ajax Submit" onclick="madeAjaxCall();"/>

</body>
</html>

【讨论】：