Javaサーブレットを使用して、HTMLフォームからデータをロードし、データベースを更新し、テーブルの同じページにデータを表示します

Question

私はいくつかの助けが必要です。 私はJava Servletとhtml形式の小さなアプリケーションを持っています。 ユーザーはいくつかのデータをhtml形式で保存し、submitボタンをクリックすると、javaサーブレットはpostメソッドでデータを取得します（データベースにロードします）。今まではすべて正常に動作します。私はjavaサーブレットとtomcatを使用しています。 私が今したいことは、HTML上の同じページの表にデータを表示することです。私はこれがajax getメソッドで可能であることを発見しました。しかし、どういうわけか私はそれを正しく得ることができません。私は（ここで最も重要なもののみ）以下のいる私のHTMLフォーム内の

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

： Javaサーブレット：ここに は自分のアプリケーションのコードを単純化し

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

ユーザー入力データベースに格納され、すべて正常に動作しています。 問題は、私は応答がなく、ユーザーから与えられたすべてのデータをテーブルに表示したいと思います。これは、各サブミット後に更新され、ユーザーは同じページにとどまります。これをする）。 データベースから、私はJSONに変換できるArrayを取得し、このすべての情報をテーブルに表示します。 私はこのようないくつかのajax.get（私は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> 

をしかし、何のデータがテーブルまたはどこかに表示されません。 私は何が間違っているのか、どうすれば適切に行われるべきか、いくつかのヒントを得てうれしいですね。 ありがとうございます。

Answer 1

これらの行でそれを実行し、あなたのブラウザのコンソールに何を得る反応を教えて：

$.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); 
    }** 
});