0

Below is the SOAPUI (GET) response when I hit: http://localhost:8082/getCountries

HTTP/1.1 200

Content-Type=application/json

Transfer-Encoding=chunked

Date=Mon, 18 May 2020 03:38:46 GMT

Keep-Alive=timeout=60

Connection=keep-alive

[{"countryId":91,"countryName":"India"},{"countryId":94,"countryName":"SriLanka"}]

And below is the jsp page with the Jquery-Ajax code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Cascading Dropdown</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    alert("Hello");
    $.ajax({
        url: "http://localhost:8082/getCountries"
    }).then(function(result) {
        alert("Success");
        var result = JSON.parse(result);
        var s = '';
        for(var i = 0; i < result.length; i++) {
            s += '<option value="' + result[i].countryId + '">' + result[i].countryName + '</option>';
        }
        $('#comboboxCountry').html(s);
    });
});



</script>

</head>
<body>

    <form>

        <table>
            <tr>
                <td>Country</td>
                <td>

<select id="comboboxCountry" style="width: 200px"></select>

                </td>

            </tr>

        </table>

    </form>

</body>
</html>

I am using two projects here. one is producing the JSON array, and another is consuming. I am posting both the controllers below:

  1. Producing Controller: 

    @Controller
public class MainController {


    @Autowired
    private MainService mainService;

    @ResponseBody
    @GetMapping(path = "/getCountries",produces = "application/json")
    public List<Country> getCountires(){

        return mainService.findAll();
    }

    @ResponseBody
    @GetMapping(path = "/getStates/{countryId}",produces = "application/json")
    public List<State> getStates(@PathVariable("countryId") Integer countryId){
        return mainService.findbyId(countryId);
    }

}

  2. Consuming controller:

    @Controller
public class MainController {


    @RequestMapping("/")
    public String home(Model model) {
        System.out.println("loading welcome page");


        return "welcome";
    }
}
Phil
  • 157,677
  • 23
  • 242
  • 245
Lucky Ratnawat
  • 67
  • 7
  • Any errors in your browser's console? – Phil May 18 '20 at 05:57
  • No errors. @Phil – Lucky Ratnawat May 18 '20 at 05:59
  • What about your browser's _Network_ console? Do you see the request being made to `http://localhost:8082/getCountries`? What is the response? – Phil May 18 '20 at 06:00
  • @Phil Yes, I can see 2 errors there: Access to XMLHttpRequest at 'http://localhost:8082/getCountries' (index):1 Access from origin 'http://localhost:8083' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. :8082/getCountries:1 Failed to load resource: net::ERR_FAILED – Lucky Ratnawat May 18 '20 at 06:08
  • I don't know what browser you're using but if there are _Network_ related errors in mine, they are also published to the _Console_. So when you said _"No errors"_, what were you actually looking at? – Phil May 18 '20 at 06:10
  • https://stackoverflow.com/a/50082997/283366 – Phil May 18 '20 at 06:12
  • @Phil, I was looking at my STS console(overlooked the 'browser's' thing in your question). Forgive me if my answers looks silly, but I am a newbie in this programming world, trying learn things. – Lucky Ratnawat May 18 '20 at 06:12

1 Answers1

0

Now I know it was a silly question. But this answer might help someone who is new and trying to learn.

This problem can be resolved just by annotating your controller like:

 @CrossOrigin(origins = "requesting host url goes here", maxAge = 3600)
Badro Niaimi
  • 959
  • 1
  • 14
  • 28
Lucky Ratnawat
  • 67
  • 7