[jQuery] $.ajax How-to?
[jQuery] $.ajax How-to?
Hello guys, my first time writing to group...<div>I'm a beginner in jquery and I'm trying to learn the $.ajax() method. I created a simple form (3 inputs) and the form should send the data (via ajax) to the page ajax.php which will return the data to be written in a div (#mensagem), just it. </div>
<div>
</div><div>But I would like to know why <b><span class="Apple-style-span" style="background-color: rgb(255, 255, 51);">THIS</span></b> works:</div><div>
<div><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);">$('#form').submit(function() {</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> $.post(</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);">'ajax.php', </span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);">$('#form').serialize(), </span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);">function(data){</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> $('#mensagem').html(data);</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);">}</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> );</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> return false;</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 255, 153);">});</span></i></div>
<div>
</div><div>and <b><span class="Apple-style-span" style="background-color: rgb(255, 255, 51);">THIS</span></b> doesn't work:</div><div>
</div><div><div><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);">$('#form').submit(function() {</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> $.ajax({</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> dataType: 'html',</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> url: 'ajax.php',</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> type: 'post',</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> data : $('#form').serialize(),</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> beforeSend: function() { alert('iniciando requisicao ajax'); },</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> error: function() { alert('ocorreu um erro'); },</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> success: function(data)</span></i></div>
<div><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> {</span></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> $('#mensagem').html(data)</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> },</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> complete: function() { alert('requisicao ajax completa'); }</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> });</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(102, 255, 255);">});</span></i></div>
<div>
</div><div>The PHP code:</div><div><div><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);"><?php</span></i></div><div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);">$nome = $_POST['nome'];</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);">$idade = $_POST['idade'];</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);">$timetorce = $_POST['timetorce'];</span></i></div>
<div><span class="Apple-tab-span" style="white-space:pre"><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);"> </span></i></span><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);">echo "Nome: $nome - Idade: $idade anos - Time: $timetorce";</span></i></div>
<div><i><span class="Apple-style-span" style="background-color: rgb(255, 102, 102);">?></span></i></div><div><i>
</i></div><div>When I use the second code, the error returned by the PHP is this:</div><div><b>Notice</b>: Undefined index: nome in <b>D:\wamp\www\sites\testes\serialize\ajax.php</b> on line <b>2</b>
<b>Notice</b>: Undefined index: idade in <b>D:\wamp\www\sites\testes\serialize\ajax.php</b> on line <b>3</b>
<b>Notice</b>: Undefined index: timetorce in <b>D:\wamp\www\sites\testes\serialize\ajax.php</b> on line <b>4</b>
Nome: - Idade: anos - Time:</div><div>
</div><div>So, how do I use the $.ajax() method?
Thanks for help!
Pedro Vidal, Brazil.</div></div></div></div>