CODEWITHSUNDEEP
jqueryajaxspringspring-boot
Bulbul Ahmed
Bulbul Ahmed

Reputation: 124

Problem on fetching data on ajax spring boot

I can not pass and fetch data from form spring boot API receive data and get response. I can not get any response. please check and give me the solution plz

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1>Temparature converter</h1>


<form>
  <label for="temp">Choose Type : </label>
  <select name="type" id="type">
    <option value="kelvin">kelvin</option>
    <option value="fahrenheit">fahrenheit</option>
    <option value="celsius">celsius</option>
  </select>
  <br><br>
   <label for="from">From Unit : </label>
  <select name="fromUnit" id="fromUnit">
   <option value="kelvin">kelvin</option>
    <option value="fahrenheit">fahrenheit</option>
    <option value="celsius">celsius</option>
  </select>
    <br><br>
    <input  id="data" name="data" placeholder="Your data" type="text" />
  <input type="submit" id="myForm" value="Submit">
</form>

<div class="append-to-me"></div>


<script>
$(document).ready(function(){
  $('#myForm').submit(function(event){
  alert("YES");
  
   //  event.preventDefault();
     var data = {type: $("#type").val(), fromUnit: $("#fromUnit").val(),data: $("#data").val()};
     alert("YES");

     //Ajax code should be here
     $.ajax({
         type: "GET",
         url: "localhost:8080/convert/",
         data: data,
         cache: false,
         success: function(response) {
         console.log(response);
            var title = response;
             $('div.append-to-me').append(title);
         },
 
     }); 
   });
   });


</script>


</body>
</html>

My API is work fine .. no problem on API. so my problem is on ajax call I think. i can not solve this problem

API IMAGE

API CODE IMAGE

Upvotes: 0

Views: 576

Answers (1)

Githendra McShane
Githendra McShane

Reputation: 96

Since you haven't shared the code of your API and As I can see in your API IMAGE, you are sending a string in the data property of the ajax request by using JSON.stringify(data). but API expects an object instead.

try

$.ajax({
     type: "GET",
     url: "localhost:8080/convert/",
     data: data,
     cache: false,
     success: function(response) {
     console.log(response);
        var title = response;
         $('div.append-to-me').append(title);
     },

 });

Upvotes: 1

Related Questions