Post form with JSP + AJAX + MYSQL, without refresh page? - mysql

Question

I have problem with send form without refresh page in JSP using AJAX. How can I create AJAX to send this form, from index.jsp to send.jsp without refresh page ? Thanks for all your answers.
This is form code and it s work, without AJAX. (index.jsp)
<form id="dom-realitka-notifikacia" action="send.jsp" method="post" >
<div class="stred">
<b class="cierna">E-mail:</b>
<input type="text" class="form-control form-rovno" id="email" name="email" placeholder="Sem napíšte e-mail">
<input type="hidden" value="domrealitka" id="tabulka" name="tabulka">
<input type="hidden" value="<%= rs.getInt("id") %>" id="id_realitka" name="id_realitka">
<button type="submit" class="btn btn-success">Odoslať</button>
</div>
</form>
And this is (send.jsp), work without AJAX and insert into MYSQL.
page contentType="text/html" pageEncoding="UTF-8"
page import="javax.mail.*"
page import="javax.mail.internet.*"
page import="javax.sql.*"
page import="javax.naming.Context"
page import="javax.naming.InitialContext"
page import="java.sql.*"
request.setCharacterEncoding("UTF-8");
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
String email = request.getParameter("email");
int id_realitka = Integer.valueOf(request.getParameter("id_realitka"));
String tabulka = request.getParameter("tabulka");
try {
Class.forName("com.mysql.jdbc.Driver");
System.out.println("nacitala sa driver");
Context ctx = new InitialContext();
DataSource ds = (DataSource)ctx.lookup("java:comp/env/jdbc/janko");
con = ds.getConnection();
System.out.println("nacitala sa databaza");
String sql = "INSERT INTO janko.notifikacia (email, id_realitka, tabulka) VALUES ( ?, ?, ?)";
ps = con.prepareStatement(sql);
ps.setString(1, email);
ps.setInt(2, id_realitka);
ps.setString(3, tabulka);
ps.executeUpdate();
con.close();
}
catch(ClassNotFoundException e1) //ClassNotFoundException dame Class.forName a klikneme ctrl+space a e1 dopiseme hocico
{
System.out.println(e1.getMessage()); //vypis spravy e1 do konzoly
}
catch(SQLException e2) //SQLException mame z DriverManager.getConnection po kliknuti ctrl+space a e2 dopiseme hocico
{
System.out.println(e2.getMessage()); //vypis spravy e2 do konzoly
}
finally{
con = null;
rs = null;
ps = null;
}

Answer 1

The form can be dynamically submitted easily using jQuery. Just include jQuery in your file and paste the following code in your HTML file.
<script>
$.ajax({url: "send.jsp",
data: $('#dom-realitka-notifikacia').serialize(),
success: function(result){
//do something like showing success message
}});
</script>
This code will serialize your form data and send it to the concerned servlet. The servlet code remains the same.