jquery - How do I update a c:forEach using Ajax in Spring project?

Question

Following is the AJAX code where I select a value in dropdown and I get a List back from controller. When I get the list back, I want to update the c:forEach item using the AJAX result.

AJAX

<script>

    $(document).ready(function() {
        $("#byCollege").change(function() {

            // Get and convert the data for sending
            // Example: This variable contains the selected option-text
            var collName = $('#byCollege').val();
            var studentName = '${salary}';
            var json = {"name" : studentName, "collName" : collName};

            // Send the data as an ajax POST request
            $.ajax({
                url: "http://localhost:8080/AnnaUnivResults/mvc/byCollege",
                type: 'POST',
                dataType: 'json',
                data:  JSON.stringify(json),
                contentType:  "application/json",
                mimeType: 'application/json',
                success: function(response) {
                    alert(JSON.stringify(response));
                    $("#studList").html(JSON.stringify(response));
                },
                error: function(data, status, er) {
                    alert("error: " + data + " status: " + status + " er:" + er);
                }
            });
        });
    });

    $(document).ready(function() {    
        alert(document.getElementById('studentName').val());
    }); 

    var current = document.getElementById('studentName').value();
    currnet.value = <c:out value="${salary}"/>
</script>

Controller

@ResponseBody @RequestMapping(value = "/byCollege", method = RequestMethod.POST,  produces = MediaType.APPLICATION_JSON_VALUE)  
    public List<OneStudentResult>   filterByColl(@RequestBody OneStudentResult oneStudentResult, ModelMap model){
        ModelAndView modelAndView = new ModelAndView();
        String deptName = null;
        nameList = resultService.getStudentByColl(oneStudentResult.getName(), oneStudentResult.getCollName());

        Iterator<OneStudentResult> itr = nameList.iterator();

        Set<String> uniqueDeptList = new TreeSet<String>();
        while(itr.hasNext()){
            System.out.println(itr.next().getName());
        }   

        uniqueDeptList.add(" Select a Department ");
        model.addAttribute("uniqueDeptList", uniqueDeptList);

        model.addAttribute("nameList", nameList);
        modelAndView.addObject("nameList", nameList);
        return nameList;
    }
    Set<String> uniqueDeptList = new TreeSet<String>();
    while(itr.hasNext()){

         deptName = itr.next().getDeptName();
         if(!uniqueDeptList.contains(deptName)){
            uniqueDeptList.add(deptName);
         }

    }   

    uniqueDeptList.add(" Select a Department ");
    model.addAttribute("uniqueDeptList", uniqueDeptList);

    model.addAttribute("nameList", nameList);
    return "nameResult";
}

Actually the purpose of the AJAX call is to update the in jstl of jsp using AJAX.

PS: As of now I could see my old table going away and I see this my List as follows

[{"regNo":"1234","name":"ABCD","collName":" COLLEGE OF ENGINEERING","deptName":"B.E. Electronics and Communication Engineering","results":null,"subjCode":null,"subjName":null,"grade":null,"result":null}]

Answer 1

Pasting as an answer, easier to format, I suspect two changes needed, one, remove the @ResponseBody from the response

and change controller method to something like

 public ModelAndView filterByColl(@RequestBody Mapping oneStudentResult, ModelMap model){
        ModelAndView modelAndView = new ModelAndView("nameResult");
   ...
        return modelAndView;
    }

then set the appropriate types in your ajax request, since the response is not json anymore. I think that you'll still face your parsing issue, as it is most likely data related, but this is a way to redirect to a view