Material Didático

Métodos – AJAX pt.2

Veja agora um exemplo utilizando os métodos 'get' e 'post' (arquivo ajax2.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Ajax2</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.js"></script>
	</head>
	
	<body>
		<script type="text/javascript">
		   $(document).ready(function() {

$("#b1").click(function() {
		       var url = "/UrlParaAlgumServlet";
		       $.get(  url,
		           {nome: $("#nome").val(), sobrenome: $("#sobrenome").val()},
		           function(data, status, xhr){
		                $("#ta1").val(data);
		              });
		     });
		     
		     $("#b2").click(function() {
		       var url = "/UrlParaAlgumServlet";
		       $.post(  url,
		           {nome: $("#nome").val(), sobrenome: $("#sobrenome").val()},
		           function(data, status, xhr){
		                $("#ta1").val(data);
		              });
		     });

});
		</script>

<textarea id="ta1" rows="5" cols="50"></textarea>
		<br>
		Nome:<input id="nome" type="text" value="John">
		Sobrenome:<input id="sobrenome" type="text" value="Lennon">

</body>
</html>

Notas

No exemplo anterior usamos a url “/UrlParaAlgumServlet” como destino de nossas requisições. Esse servlet precisa existir e processar requisições GET e POST para que o exemplo funcione. Se desejar pode criar você mesmo.

Termo de uso

arrow_back Aula 08 - jQuery (Parte 2)

Métodos – AJAX pt.2

Notas

Aula 08 - jQuery (Parte 2)