使用Java Servlet从html表单加载数据，更新数据库并在表的同一页上显示数据

Question

I need some help. I have a small application which consists of Java Servlet and html form. User puts some data in a html form and after clicking on submit button the java servlet gets the data in it's post method (loads it in a database). Till now all works fine. I am using java servlet and tomcat. What I want to do now is to display the data in a table on the same page on html. I have found, that this would be possible through ajax get method. But somehow I can't get it right. Here simplified code of my application: Java Servlet:

@WebServlet(name = "MyServlet", urlPatterns = { "/MyServlet" })
public class MyServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse    response) throws ServletException, IOException {
response.setContentType("text/html");
// getting the values submitted by the user from the html form
String name = request.getParameter("name");
String surname = request.getParameter("surname");
// here goes some logic to load data in the database
// data from database is recieved as an array and is then converted to 
// json 
// here I can only print the whole json retrieved from DB 
// and it is displayed on another page with myurl/MyServlet
 response.setContentType("application/json");
 PrintWriter out = response.getWriter();
 response.setCharacterEncoding("UTF-8");
 out.println(json);

}
public void doGet(HttpServletRequest request, HttpServletResponse   response) throws IOException{
// nothing happens here
}

In my html form I have the following (the most important things here only):

<form action="MyServlet" method="post">
<input class="form-control" type="text" name="name" id="name">
<input class="form-control" type="text" name="surname" id="surname">
<input type="submit" class="btn btn-info" id="MyS"value="MyServlet">
<table class="table" id="table">
<tr>
    <th>name</th>
    <th>surname</th>
</tr>

The user input is stored in a database and everything is working fine. The problem is, that I get no response and I would like to display all of the data given from user in a table, which schould be updated after each submit and user schould stay on the same page (don't actually know, how to do this). From the database I get an Array which I can convert to JSON and all this information schould be displayed in a table. I tried to write some ajax.get like this (I am a real newby in javascript):

<script>
<script type="text/javascript">
$("#MyS").click(function() {

}
$.ajax({
    url: "/MyServlet",
    type: "POST",
    dataType: '{json: json}',
    data: myvalue,

    success: function(data) {  
        $('#table').append(data);
    },
});
</script>

But no data is displayed in the table or somewhere. I would be glad to get some hints i what I am doing wrong and how should it be done properly? Thanks in advance.

Answer 1

Execute it with these lines and tell me what response you get in your browser's console:

$.ajax({
    url: "/MyServlet",
    type: "POST",
    dataType: '{json: json}',
    data: myvalue,
    success: function(data) 
    {  
        console.log( data ); // logs this on success
        $('#table').append(data);
    },
    **error: function (textStatus, errorThrown) 
    {
        console.log( textStatus ); // log this on error
        console.log( errorThrown );
    }**
});