Reputation: 657
I'm using $.ajax(options)
method to pass the request to server based on username and password, but whenever I try to print the response by XMLHttpRequest object when response gets successful, I'm getting an empty value.
$(document).ready(function(){
$("#form").submit(function(){
$.ajax({url:"Chat.jsp",type:"POST",data:$("#form").serialize(),success:function(request) {
alert(request.responseText); //This is displaying nothing
},error:function(){document.write("YOU can't");}});
});
});
This is what I'm doing in my servlets code after executing query:
try {
String user = request.getParameter("j_username");
String password = request.getParameter("j_password");
if(user != null && password != null) {
String query = "Select * from users where user_name="+"\'"+user+"\'"+"&& user_pass="+"\""+password+"\"";
DBCheck db= new DBCheck();
boolean b = db.doExecuteQuery(con.createStatement(),query);
response.setHeader("Cache-Control", "no-cache");
if(b) {
response.getWriter().println("Username already exits");
}
else {
response.getWriter().println("Username doesn't exit");
}
}
}
catch(SQLException ex) {
ex.printStackTrace();
}
}
May I know the problem, and how can I fix it?
Upvotes: 0
Views: 4768
Reputation: 3927
I had the same problem as you.
In my case the problem was solved simply by setting the content type of the response on the server.
response.setContentType("text");
Then in your ajax jquery function, you should remove the line alert(request.responseText); //This is displaying nothing
and replace by this alert(request);
Your jquery code should be something like this:
$(document).ready(function(){
$("#form").submit(function(){
$.ajax({url:"Chat.jsp",type:"POST",data:$("#form").serialize(),success:function(request) {
alert(request); //This is displaying nothing
},error:function(){document.write("YOU can't");}});
});
});
Server side:
try {
String user = request.getParameter("j_username");
String password = request.getParameter("j_password");
response.setContentType("text");
if(user != null && password != null) {
String query = "Select * from users where user_name="+"\'"+user+"\'"+"&& user_pass="+"\""+password+"\"";
DBCheck db= new DBCheck();
boolean b = db.doExecuteQuery(con.createStatement(),query);
response.setHeader("Cache-Control", "no-cache");
if(b) {
response.getWriter().println("Username already exits");
}
else {
response.getWriter().println("Username doesn't exit");
}
}
}
catch(SQLException ex) {
ex.printStackTrace();
}
}
I know this is an old post but I hope it help someone else!
Upvotes: 0
Reputation: 1075755
I'm surprised the other answers haven't sorted it out for you. I've included a complete working example below in case there's just something really subtle going wrong in your code, but first, I have a few notes on your code.
Your code (reformatted):
$(document).ready(function(){
// Does your form really have `id="form"` in it?
$("#form").submit(function(){
$.ajax({
url:"Chat.jsp",
type:"POST",
data:$("#form").serialize(),
success:function(request) {
// `request` seems a very strange name; perhaps `data` or `response`?
alert(request);
},
error: function(){
// You can't use `document.write` after the page has been parsed
document.write("YOU can't");
}
});
});
});
Client:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Ajax Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
$(document).ready(pageInit);
function pageInit() {
$('#btnGo').click(go);
}
function go() {
$.ajax({
url: "ajaxserver.jsp",
type: "POST",
data: {"field1": "one"},
success: function(data) {
alert("Request succeeded: " + data);
},
error: function() {
alert("Request failed");
}
});
}
})();
</script>
</head>
<body>
<input type='button' id='btnGo' value='Go'>
</body>
</html>
Server:
<%
response.setContentType("text/plain");
%>Hi there, field1 = <%=request.getParameter("field1")%>.
Upvotes: 0
Reputation: 239551
Your success callback should have three arguments:
success(data, textStatus, XMLHttpRequest)
The XMLHttpRequest
you're after is the 3rd argument; data.responseText
is what you're actually finding is blank.
See http://api.jquery.com/jQuery.ajax/
Upvotes: 0
Reputation: 382909
Instead of:
alert(request.responseText);
Use:
alert(request);
So it should be like:
$(document).ready(function(){
$("#form").submit(function(){
$.ajax({url:"Chat.jsp",type:"POST",data:$("#form").serialize(),success:function(response) {
alert(response);
},error:function(){document.write("YOU can't");}});
return false;
});
});
Upvotes: 1