使用 Jsp Ajax 在数据表上只显示一条记录

Question

我需要使用 jsp json 查看数据表中的记录。数据成功显示到数据表。我的问题是只显示一行数据。数据库记录的最后一行重复了 4 次。我在数据表上显示的内容以及 mysql 数据库中的数据下方附上了图片。

记录显示一个数据表看起来像这样。数据重复

Mysqldata数据

数据表

    function get_all()
{
    $('#tbl-projects').dataTable().fnDestroy();
    $.ajax({
        url : "all_project.jsp",
        type : "GET",
        dataType : "JSON",

        success:function (data){
                console.log(data);
            $('#tbl-projects').dataTable({
                "aaData": data,
                "scrollX": true,
                "aoColumns": 
                [
                    {"sTitle": "Name", "mData": "name"},
                    {"sTitle": "Course", "mData": "course"},
                    {"sTitle": "Fee", "mData": "fee"},
                ]
            });

        },

        error: function (xhr) {
            console.log('Request Status: ' + xhr.status  );
            console.log('Status Text: ' + xhr.statusText );
            console.log(xhr.responseText);
            var text = $($.parseHTML(xhr.responseText)).filter('.trace-message').text();
        }

    });

} details.jsp

    <%@page import="org.json.simple.JSONArray"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.parser.JSONParser"%>
<%@page import="org.json.simple.parser.ParseException"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.sql.*" %>
 <%
    JSONObject obj = new JSONObject();
     JSONArray list = new JSONArray();
    Connection con;
    PreparedStatement pst;
    ResultSet rs;
    Class.forName("com.mysql.jdbc.Driver");
    con = DriverManager.getConnection("jdbc:mysql://localhost/studcrud", "root","");
    String query="select * from records";  
    Statement stmt=con.createStatement();
    rs=stmt.executeQuery(query);
    while(rs.next())       
{    
    String id     = rs.getString("id");
    String name   = rs.getString("name");
    String course = rs.getString("course");
    String fee    = rs.getString("fee"); 
    obj.put("name", name);
    obj.put("course", course);
    obj.put("fee", fee);
    obj.put("id", id);

    list.add(obj);
}
    out.print(list.toJSONString());
    out.flush();      

 %>

Answer 1

您需要在ajax success 函数中解析json 即：

<script language="javascript">
   function ClickMe_Click(){
    $.ajax({

        type: "post",
        url: "details.jsp",
        data: {"a": $("#accno").val()},
        success: function(msg) {
    //parsing json response
            var obj = JSON.parse(msg); 
              alert(obj[0].bal);

                 //setting value in input field

                  $("#bal").val(obj[0].bal);
                 $("#name").val(obj[0].name);
        },
        error:function (xhr, ajaxOptions, thrownError){
            alert(xhr.status);
            alert(thrownError);
        }  
    });
    return false;
}
</script>