how to deal jquery ajax with jsp for database update? -
i have used ajax jquery , ajax url calling jsp page submits form data database problem whenever i'm running insert query, replying "null values can't inserted database" kinda exception, whenever i'm reloading same page , clicking submit button, getting submitted database. think problem postback method, i'm new ajax please need help...
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#save').click(function () { $.ajax({ type: "post", url: "test.jsp", //this servlet data: "input=" +$('#id').val()+"&output="+$('#op').val(), success: function(msg){ $('#output').append(msg); } }); }); }); </script> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsp page</title> </head> <body> input:<input id="id" type="text" name="" value="" /><br></br> output:<input id="op" type="text" name="" value="" /><br></br> <input type="button" value="save" name="save" id="save"/> <div id="output"></div> </body> jsp:
<%@page import ="com.connectionutil.connectionutil"%> <!doctype html> <script src="js/jquery.min.js" type="text/javascript"></script> <% string id = request.getparameter("input"); try { connection con = connectionutil.getconnection(); string sql = "insert test(id,...) values ('" + id + "',...)"; preparedstatement ps = con.preparestatement(sql); ps.executeupdate(); } catch (sqlexception sqe) { out.println(sqe); }%> <body> <h4><%=id%> stored </h4> </body> </html>
your ajax code wrong. should this:
$.ajax({ type: "post", url: "test.jsp", //this servlet data: {input : $('#id').val(), output: $('#op').val()}, success: function(msg){ $('#output').append(msg); } }); and use request.getparameter("input") parameter value
update : please note missed comma (,) @ end of line data:....
update 2 : working demo of code without connections db...
index.jsp:
<%@page contenttype="text/html" pageencoding="utf-8"%> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#save').click(function () { $.ajax({ type: "post", url: "test.jsp", //this servlet data: { input: $('#id').val(), output: $('#op').val() }, success: function(msg){ $('#output').append(msg); } }); }); }); </script> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsp page</title> </head> <body> input:<input id="id" type="text" name="" value="" /><br></br> output:<input id="op" type="text" name="" value="" /><br></br> <input type="button" value="save" name="save" id="save"/> <div id="output"></div> </body> test.jsp :
<%@page contenttype="text/html" pageencoding="utf-8"%> <% string id = request.getparameter("input"); string output = request.getparameter("output"); %> <%=id%> stored <br/>output is:<%=output%> the first screen shows this:
and after inserting data , pressing save button shows this:
Comments
Post a Comment