Используйте ajax для отправки формы и получения информации с сервлета

Question

Я разрабатываю webapp с помощью java, и в настоящее время мне нужно отправить информацию из формы в сервлет и отправить обратную ссылку обратно на страницу html с сервлета. В частности, когда пользователь подключается, я хочу вернуть из сервлета имя пользователя и пароль всех пользователей в моей базе данных От того, что я искал, единственный способ сделать это правильно - это использовать ajax, но я не могу показаться способный заставить его работать.

Отрывок из HTML страницы

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="form" method="post" action="signIn"> 
 
     <input id="uname" name="uname" class="form-control" type="text"> 
 
     <input id="pass" name="pass" class="form-control" type="password"> 
 
     <input id="button1" class="btn btn-primary" type="submit" value="Sign In" /> 
 
    </form> 
 
    <div id=result></div>

Мой сервлет (SingIn.java) в настоящее время выглядит следующим образом

public class SignIn extends HttpServlet { 
    private static final long serialVersionUID = 1L; 


    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
      throws ServletException, IOException { 
     response.setContentType("text/html;charset=UTF-8"); 
     PrintWriter out = response.getWriter(); 

     String uname = request.getParameter("uname"); 
     String pass = request.getParameter("pass"); 

      Registration.setOnline(uname); 
      try { 
       // loading drivers for mysql 
       Class.forName("com.mysql.jdbc.Driver"); 

       // creating connection with the database 
       Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/ted", "root", "root"); 
       PreparedStatement ps = con.prepareStatement("select * from user"); 
       ResultSet rs = ps.executeQuery(); 
       out.println("<table>"); 
       while (rs.next()) { 
        uname = rs.getString(1); 
        pass = rs.getString(2); 
        out.println("<tr><th>" + uname +"</th><th>"+ pass + "</th></tr>"); 
       } 
       out.println("</table>"); 

      } catch (Exception e) { 
       e.printStackTrace(); 
      } 


      RequestDispatcher res = request.getRequestDispatcher("html/index.html"); 
      res.include(request, response); 

    } 
} 

Часть моей web.xml выглядит так

<servlet-mapping> 
    <servlet-name>SignIn</servlet-name> 
    <url-pattern>/signIn</url-pattern> 
</servlet-mapping> 

Как это я могу получить доступ к сервлету и иметь данные формы, представленные, но в ответ сервлета появляется в верхней части страницы, в то время как мне нужно, чтобы это было показано в «результате» делах. Я думаю, что лучше использовать Ajax и Javascript, но я действительно нужна помощь в этой части

Update В настоящее время я пытаюсь что-то подобное в AJAX $ (документ) .ready (функция() {

// Add an event that triggers when the submit 
// button is pressed. 
$("#button1").click(function() { 

    // Get the text from the two inputs. 
    var uname = $("#uname").val(); 
    var pass = $("#pass").val(); 



    // Ajax POST request. 
    $.post('signIn',{"uname": uname, "pass": pass}, 
     function() { // on success 
      $(#result).innerHTML=(not sure what); 
     }); 

}); 

Answer 1

Ваш вызов JavaScript должен выглядеть следующим образом:

// Ajax POST request. 
$.post('./signIn', 
    {"uname": uname, "pass": pass}, 
    function(data) { // on success 
     $("#result").html(data); 
    }); 

или более ясно:

// Ajax POST request. 
$.ajax({ 
    type: 'POST', 
    url: './signIn', 
    data: {"uname": uname, "pass": pass}, 
    success: function(data) { 
     $("#result").html(data); 
    } 
});