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

我不熟悉ajax。我试图在JSP文件中将数据显示到表中

API是使用AJAX调用的

控制器通过下面的响应：

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

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

在JSP页面中：

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

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

函数getStudentDetails（）{
$batch=$（“#batch”）；
$course=$（“#course”）；
$.ajax({
键入：“获取”，
url:“./batchAjax？batchId=“+$batch.val（）+”&courseId=“+$course.val（）”，
成功：功能（数据）{
console.log（“成功”，数据）；
如果（数据！=null）{
$（“#batchwiseTable”）.find（“tr:gt（0）”）.remove（）；
var batchwiseTable=$（“#batchwiseTable”）；
$.each（JSON.parse（数据）、函数（键、值）{
console.log（键+”：“+值）；
var rowNew=$（“”）；
rowNew.children（）.eq（0）.text（值['name']）；
rowNew.children（）.eq（2）.text（值['emailId']）；
rowNew.children（）.eq（3）.text（值['placed']）；
rowNew.children（）.eq（4）.text（值['batch']）；
rowNew.children（）.eq（5）.text（值['mobileNo']）；
rowNew.appendTo（batchwiseTable）；
});
$（“#batchwiseTable”）.show（）；
}
},
错误：函数（e）{
控制台日志（“错误”，e）；
}
});
}

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

有人能告诉我哪里错了吗？

下面的代码应该保存在.jsp页面中，您可以在其中显示您不知道的表格；不需要为表jsp页面编写html代码。
   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) {

                            }
                        });

Javascript代码：
下面的代码用于ajax调用
用url中使用的url值替换uri。
$.ajax({
键入：“GET”，
url:uri，
成功：功能（数据）{
var str=''+
“NameCourseeMaildPlaceBatchMobile号码”；
$。每个（数据、函数（键、值）{
str=str+''+
value.name+“”+
value.course+“”+
value.emailId+“”+
value.placed+“”+
value.batch+“”+
value.mobileNo+“”；
});
str=str+''；
$（“#在此处插入表格”）.html（str）；
}，错误：函数（数据）{
}，完成：功能（数据）{
}
});
< /代码>该响应不适用于我。这不是JSON，因此JSON.PARSE将进行BARF和中止。请考虑对您的答案添加一些解释。