Pessoal,
encontrei um exemplo de utilização de AJAX com JSP na net, e achei super legal. Porém pairou uma dúvida.
Pelo que eu entendi, o formulário está enviando as informações para a gravação dos dados, e após gravados, é retornada a informação de que os dados foram inseridos com sucesso. Porém, e se no caso, eu quisesse que fossem retornados outros dados, como por exemplo àqueles mesmos dados que eu acabei de gravar. Sem a necessidade de se fazer uma consulta novamente, simplesmente retornar os dados para que a página seja atualizada? Isso é fácil ou o AJAX só retorna uma única informação? O exemplo do retorno foi feito com um out.println(), mas e se no caso fossem vários os atributos que eu gostaria que retornassem para serem exibidos?
Me desculpem se não me expressei bem. Vai o código:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Teste</title>
<script>
function verificacampos()
{
var nome = document.getElementById("nome").value;
var senha = document.getElementById("senha").value;
var login = document.getElementById("login").value;
if (senha == "" || login == "" || nome == "")
{
alert('É necessário digitar os campos Nome, Login e Senha corretamente');
return false;
}
else
{
salvar();
}
}
//esta é a função Ajax. Sem ela, nada acontece.
function openAjax() {
var ajax;
try{
ajax = new XMLHttpRequest(); // XMLHttpRequest para Firefox, Safari, dentre outros.
}catch(ee){
try{
ajax = new ActiveXObject("Msxml2.XMLHTTP"); // Para o Internet Explorer
}catch(e){
try{
ajax = new ActiveXObject("Microsoft.XMLHTTP"); // Para o Internet Explorer
}catch(E){
ajax = false;
}
}
}
return ajax;
}
function salvar()
{
var nome = document.getElementById('nome').value; //Note que as variáveis são resgatadas pela função getElementById.
var endereco = document.getElementById('endereco').value;
var cidade = document.getElementById('cidade').value;
var telefone = document.getElementById('telefone').value;
var login = document.getElementById('login').value;
var senha = document.getElementById('senha').value;
var exibeResultado = document.getElementById('exibeResultado');
var ajax = openAjax(); // Inicia o Ajax.
ajax.open("POST", "grava_usuario.jsp?nome=" + nome +"&endereco=" + endereco + "&cidade=" + cidade + "&telefone=" + telefone +"&login=" + login + "&senha="+ senha, true); // Envia o termo da busca como uma querystring, nos possibilitando o filtro na busca.
ajax.onreadystatechange = function()
{
if(ajax.readyState == 1) // Quando estiver carregando, exibe: carregando...
{
exibeResultado.innerHTML = "Inserindo";
}
if(ajax.readyState == 4) // Quando estiver tudo pronto.
{
if(ajax.status == 200)
{
var resultado = ajax.responseText;
exibeResultado.innerHTML = resultado;
}
else
{
exibeResultado.innerHTML = "Erro nas funções do Ajax";
}
}
}
ajax.send(null); // submete
document.getElementById("nome").value= "";//limpa os campos
document.getElementById("endereco").value= "";
document.getElementById("senha").value= "";
document.getElementById("login").value= "";
document.getElementById("cidade").value= "";
document.getElementById("telefone").value= "";
document.getElementById("nome").setFocus=true;
}
</script>
<link rel="stylesheet" type="text/css" href="tabelacss.css"/>
</head>
<body>
<table id="tabela_especial" align="center" width="900">
<tr>
<td>
<table border="1" align="center" width="790">
<tr>
<td id="fundo_branco">Escrever no Banco com Ajax </td>
</tr>
<tr>
<td align="left">
<table align=center width="790">
<tr>
<td>
<form name="formgrava" action="grava_usuario.jsp">
<table width="560">
<tr>
<td align="right">Nome:</td><td><input type="text" id="nome" size="30" name="nome"></td>
</tr>
<tr>
<td align="right">Endereço:</td><td><input type="text" id="endereco" size="30" name="endereco"></td>
</tr>
<tr>
<td align="right">Cidade:</td><td><input type="text" id="cidade" size="30" name="cidade"></td>
</tr>
<tr>
<td align="right">Telefone:</td><td><input type="text" id="telefone" size="30" name="telefone"></td>
</tr>
<tr>
<td align="right">Login:</td><td><input type="text" id="login" size="30" name="login"></td>
</tr>
<tr>
<td align="right">Senha:</td><td><input type="password" id="senha" size="30" name="senha"></td>
</tr>
<tr><br></tr>
<tr>
<td align="left"><td><input type="button" size="30" name="gravar" id="gravar" value="Gravar" onclick="verificacampos()">
<input type="button" size="30" name="cancelar" value="Cancelar">
</tr>
</form>
</table></td>
</tr>
</td>
</tr>
</table><tr></tr>
<table>
<tr align="left">
<td align="left"><font color="lightgray">Status: </font></td>
<td align="left"><div id="exibeResultado" align="center"><font color="lightgray">Em espera</font></div></td>
</tr>
</table>
<tr><td align="right"><font color="#EBD8F5">Inserção usando AJAX</font></td></tr>
</table>
</td><br>
</tr>
</table>
</body>
</html>
<% // Importação de Classes Java %>
<%@ page import = "java.sql.*" %>
<%@ page import = "java.text.*" %>
<%@ page import = "java.util.*" %>
<% // Variáveis da conexão com o banco de dados %>
<%
String url1 = "jdbc:mysql://localhost:3306/projeto2";
String usuario = "root";
String senha = "";
Connection con = null;
Statement stm = null;
// conexão ao banco de dados
Class.forName("org.gjt.mm.mysql.Driver").newInstance();
con = DriverManager.getConnection( url1, usuario, senha);
stm = con.createStatement();
//Parâmetros recuperados do Ajax
String login = request.getParameter("login");
String senha1 = request.getParameter("senha");
String nome = request.getParameter("nome");
String endereco = request.getParameter("endereco");
String telefone = request.getParameter("telefone");
String cidade = request.getParameter("cidade");
%>
<% String querySQL = "";
querySQL = "insert into geral2 (nome, endereco, telefone, cidade, login, senha) values ('"+nome+"', '"+endereco+"', '"+telefone+"', '"+cidade+"', '"+login+"', '"+senha1+"') ";
stm.executeUpdate(querySQL);
//Este comando devolverá "Dados inseridos com Sucesso para" o Ajax.
out.println("Dados inseridos com Sucesso!!!");
%>
<% con.close(); %>
<%// Note que, após a inserção, a página não redireciona para nenhuma página.%>
