如何在 JSP 中使用 AJAX 将 JSON 数组显示到表中

Question

我是 ajax 新手。我正在尝试将数据显示到 JSP 文件中的表中。

API 是使用 AJAX 调用的。

控制器通过以下响应：

BatchwiseStudent [name=Ram, course=MCA (Commerce), emailId=rammansawala@gmail.com, placed=null, batch=2016, mobileNo=7.276339096E9]

在 JSP 页面中：

<script type="text/javascript">
        function getStudentDetails(){
            $batch = $('#batch');
            $course = $('#course');
            $.ajax({
                type: "GET",
                url: "./batchAjax?batchId="+$batch.val()+"&courseId="+$course.val(),


                    success: function(data){
                        console.log("SUCCESS ", data);

                        if(data!=null){
                            $("#batchwiseTable").find("tr:gt(0)").remove();
                            var batchwiseTable = $("#batchwiseTable");
                            $.each(JSON.parse(data),function(key,value){
                                console.log(key + ":" + value);

                                var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
                                rowNew.children().eq(0).text(value['name']);
                                rowNew.children().eq(2).text(value['emailId']);
                                rowNew.children().eq(3).text(value['placed']);
                                rowNew.children().eq(4).text(value['batch']);
                                rowNew.children().eq(5).text(value['mobileNo']);
                                rowNew.appendTo(batchwiseTable);
                            });
                            $("#batchwiseTable").show();
                        }
                    },
                    error: function(e){
                        console.log("ERROR ", e);
                    }

            });

        }
    </script>

我可以在表格中看到新行，但没有数据。我想将姓名、电子邮件、手机号等放入特定字段。

谁能指导我哪里错了？

Answer 1

   Below code should be keep  in the .jsp Page where you show table   you   don;t need to write html code for table jsp page.

 <div id="insert-table-here"></div>   



Javascript code:

below code is for ajax call
replace uri with your url value that is used in your url.



    $.ajax({
                            type: 'GET',
                            url: uri,
                            success: function (data) {
                                var str = '<table class="table table-bordered"><thead>'+
                                '<tr><td>Name</td><td>Course</td><td>EmailId</td><td>Place</td><td>Batch</td><td>Mobile Number</td></tr></thead><tbody>';
                                $.each(data, function (key, value) {
                                    str = str + '<tr><td>' +
                                            value.name + '</td><td>' +
                                            value.course + '</td><td>' +
                                            value.emailId + '</td><td>' +
                                            value.placed + '</td><td>' +
                                            value.batch + '</td><td>' +
                                            value.mobileNo + '</td></tr>';

                                });
                                str = str + '</tbody></table>';
                                $('#insert-table-here').html(str);

                            }, error: function (data) {

                            }, complete: function (data) {

                            }
                        });