pass a string from ajax function to spring controller

Question

I'm working on a standalone application and I'm trying to pass a string which is an output of change event, to the spring controller using the code below

HTML CODE

<!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>

controller code

@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;
     
 }

I'm getting an error "Failed to load resource: the server responded with a status of 404 ()" in the browser console.

Help me to pass the string "changed" to the controller.

I'm using these dependencies

jquery from "org.webjars" ,
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

Should I be using any other dependencies ??

Renis1235 Renis1235 · Accepted Answer · 2021-05-12T08:46:12

The HTTP Status 404 means that the URL provided, cannot be found on the server.

I see that you make the Ajax call with an incorrect URL. Change it to the correct one depending on your Spring App and port.

Normally it should be under: http://localhost:8080/mandyName. But this you have to check and examine.

Sample JS code:

 $(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; 
                }   
            }); 
        });                             
    });

pass a string from ajax function to spring controller

1 Answers