java - 数据未使用 Jsp Ajex crud 加载到数据表中

Question

我正在创建简单的增删改查系统。我是jsp的初学者。我可以使用ajax在成功添加的JSP记录中将数据添加到数据库中。添加记录后，我尝试将数据加载到数据表上，但数据没有加载到数据表上我在下面写了代码。到目前为止我尝试了什么

表格

 <table id="tbl-projects" class="table table-responsive table-bordered" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                    </tr>

                </table>



  ********JQuery********

<Script>
get_all();
    function get_all()
        {
            $('#tbl-projects').dataTable().fnDestroy();
            $.ajax({
                url : "all_project.jsp",
                type : "GET",
                dataType : "JSON",
                success:function(data)
                {
                    $('#tbl-projects').html(data);
                    $('#tbl-projects').dataTable({
                        "aaData": data,
                        "scrollX": true,
                        "aoColumns": [
                            {"sTitle": "StudentName", "mData": "name"},
                            {"sTitle": "Course", "mData": "course"},
                            {"sTitle": "Fee", "mData": "fee"},                
                            {
                                "sTitle": "Edit",
                                "mData": "id",
                                "render": function (mData, type, row, meta) {
                                    return '<button class="btn btn-xs btn-success" onclick="get_project_details(' + mData + ')">Edit</button>';
                                }
                            },
                            {
                                "sTitle": "Delete",
                                "mData": "id",
                                "render": function (mData, type, row, meta) {
                                    return '<button class="btn btn-xs btn-primary" onclick="Remove_details(' +  mData + ')">Delete</button>';
                                }
                            }
                        ]
                    });

                },
                error: function (xhr, status, error) {
                    alert(xhr);
                    console.log(xhr.responseText);

                    $.alert({
                        title: 'Fail!',
                        //            content: xhr.responseJSON.errors.product_code + '<br>' + xhr.responseJSON.msg,
                        type: 'red',
                        autoClose: 'ok|2000'
                    });
                    $('#save').prop('disabled', false);
                    $('#save').html('');
                    $('#save').append('Save');
                }
            });
        } 
</Script>

这是Jsp代码all_project.jsp JSP 代码

    <% Class.forName("com.mysql.jdbc.Driver"); %>
    <%@page contentType="text/html" pageEncoding="UTF-8"%>
    <%@page import="java.sql.*" %>
     <%
                Connection con;
                PreparedStatement pst;
                ResultSet rs;
                Class.forName("com.mysql.jdbc.Driver");
                con = DriverManager.getConnection("jdbc:mysql://localhost/studcrud", "root","");
                String query="select * from record";  
                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"); 

                 out.println(id);
                out.println(name);
                out.println(course);
                out.println(fee);


}                
     %>

控制台上显示的数据如下所示

**1
john
java
10000
2
Raja
C#
7000
3
sad
asd
2323
4
Nishan
Jsp
12000**

但是却显示在数据表上

将数据添加到数据库代码JSP Ajax

function addProject()
    {
        if($("#frmProject").valid())
        {
            var url= '';
            var dat = '';
            var method = '';
            if(isNew == true)
            {
                url = 'add.jsp';
                data = $('#frmProject').serialize();
                method = 'POST';
            }

            else
            {
                url = 'update_project.jsp';
                data = $('#frmProject').serialize() + "&project_id=" + project_id;
                method = 'POST';
            }

            $.ajax({

                type : method,
                url : url,
                dataType : 'JSON',

                success : function (data)
                {
                    $('#frmProject')[0].reset();

                    $('#save').html('');
                    $('#save').append('Add');

                    var msg;
                    get_all();
                    if(isNew)
                    {
                        msg = "Course Created";
                    }
                    else
                    {
                        msg = "Course Updated";
                    }


                    isNew = true;
                },
                error: function (xhr, status, error) {
                    alert(xhr);
                    console.log(xhr.responseText);

                    $.alert({
                        title: 'Fail!',
                        //            content: xhr.responseJSON.errors.product_code + '<br>' + xhr.responseJSON.msg,
                        type: 'red',
                        autoClose: 'ok|2000'

                    });
                    $('#save').prop('disabled', false);
                    $('#save').html('');
                    $('#save').append('Save');
                }

            });

        }
    }

add.jsp

<%@page import="java.sql.*" %>

<% Class.forName("com.mysql.jdbc.Driver"); %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>


         <% 
            String studname = request.getParameter("studname");
             String course = request.getParameter("course");
             String fee = request.getParameter("fee");

            Connection con;
            PreparedStatement pst;
            ResultSet rs;

            Class.forName("com.mysql.jdbc.Driver");
            con = DriverManager.getConnection("jdbc:mysql://localhost/studcrud", "root","");

            pst = con.prepareStatement("insert into records(name,course,fee)values(?,?,?)");
        pst.setString(1,studname);
        pst.setString(2,course);
            pst.setString(3,fee);

            pst.executeUpdate();



        %>

Answer 1

在 DataTables 1.10.0 版本中，它是内置的且简单:

var table = $('#example').DataTable();
table.ajax.reload();

或者可能是:

$('#example').DataTable().ajax.reload();