将字符串从 ajax 函数传递给 spring 控制器答案

【问题标题】：pass a string from ajax function to spring controller将字符串从 ajax 函数传递给 spring 控制器
【发布时间】：2021-08-02 00:32:21
【问题描述】：

我正在开发一个独立的应用程序，我正在尝试使用下面的代码将一个作为更改事件输出的字符串传递给 spring 控制器

HTML 代码

<!DOCTYPE HTML>
<html xmnls:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>ADD NEW BILL</title> 
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript">
    $(function() {
        $("#Mandy_Name").autocomplete({
            source: "autocomplete", 
            minLength: 3        
        });
    });     
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#Mandy_Name").change(function(){
            var changed =  $(this).val();   
            console.log(changed);           
            $.ajax({
                type : "POST",  
                dataType : 'json',
                url : "mandyname",
                data: {name:changed},       
                success: function(data) {
                    console.log(data);              
                    return false; 
                }   
            }); 
        });                             
    });     
    </script>
</head>
<body>
<div class="container">
<hr>
<p class="h4 mb-4">SAVE NEW PURCHASE BILL</p>
    <form action="#" th:action="@{/savePurchase}" 
        th:object="${purchase}" method="post">
        <!-- add a hidden field to handle update   -->
        <!-- <input type="hidden" th:field="*{idPurchaseDetails}"> -->
        <input type="hidden" th:field="*{ID}">
        
        MANDY NAME : <input id="Mandy_Name" type="text" th:field="*{mandyName}"
                    class="form-control mb-4 col-4" placeholder="Mandy Name">   
                
        GSTIN : <input type="text" th:field="*{gstin}"
                    class="form-control mb-4 col-4" value = gst() placeholder="GSTIN">
            
                    <button type="submit" class="btn btn-info col-2">SAVE</button>
    </form>
    <br><br>
    <a th:href="@{/purchaselist}">BACK TO PURCHASE LIST</a>
</div>
</body>

</html>

控制器代码

@RequestMapping(value = "mandyName", method = RequestMethod.POST) 
 public ModelAndView getSearchResultViaAjax(@RequestBody Purchase purchase, HttpServletRequest request,
            HttpServletResponse response)
 { 
     ModelAndView mv = new ModelAndView();
     String name = purchase.getMandyName();
     System.out.println(name);
     return mv;
     
 }

我在浏览器控制台中收到错误“加载资源失败：服务器响应状态为 404 ()”。

帮我把字符串“changed”传给控制器。

我正在使用这些依赖项

来自“org.webjars”的jquery，
spring-boot-starter-actuator ,
spring-boot-starter-data-jpa ,
spring-boot-starter-web ，
spring-boot-starter-data-rest ，
spring-boot-starter-thymeleaf，
spring-boot-devtools，
spring-boot-starter-json ,
mysql-connector-java ,
spring-boot-starter-test ，
junit-vintage-engine ，
spring-boot-maven-plugin

我应该使用任何其他依赖项吗？？

【问题讨论】：

标签： javascript java ajax spring-boot spring-mvc

【解决方案1】：

HTTP Status 404 表示提供的 URL，在服务器上找不到。

我看到您使用不正确的 URL 进行 Ajax 调用。根据您的 Spring App 和端口将其更改为正确的。

通常它应该在：http://localhost:8080/mandyName。但这你必须检查和检查。

示例 JS 代码：

 $(document).ready(function(){
        $("#Mandy_Name").change(function(){
            var changed =  $(this).val();   
            console.log(changed);           
            $.ajax({
                type : "POST",  
                dataType : 'json',
                url : "http://localhost:8080/mandyName", // ~~ HERE ~~
                data: {name:changed},       
                success: function(data) {
                    console.log(data);              
                    return false; 
                }   
            }); 
        });                             
    });

【讨论】：

页面“mandyName”不是我项目中的模板，我无法使用 ID 为“Mandy_Name”的文本框所在的模板的 URL。请帮帮我@Renis1235
如果上面的代码是由@Renis1235给出的，在浏览器中会看到错误500，如果URL与显示的表单的URL相同，应用程序会因以下错误“org”而终止.thymeleaf.exceptions.TemplateInputException"
代码 500 表示发生了服务器错误，正如您正确指出的 org.thymeleaf.exceptions.TemplateInputException。现在你调用了正确的 URL，只是你在服务器端的实现不正确。我建议你检查和谷歌关于 HTTP 状态代码，然后在这里跳到手头的错误。