Carregue conteúdo php com jQuery AJAX

Meu problema:

Eu tenho index.html:

Input:

toload.php é algo como:

  

A questão é bastante simples.

Quando eu pressionar o Submit! botão, eu gostaria de carregar dinamicamente o conteúdo para toload.php no index.html sem a necessidade de uma atualização.

Desde já, obrigado! Por favor, comente para qualquer esclarecimento necessário.


EDITAR, uma explicação mais detalhada:

Eu não tenho certeza de estar sendo claro (ou talvez não esteja entendendo as respostas para minha falta de habilidades técnicas), então eu vou dar outra chance. (rewrite)

Eu tenho um HTML para com um botão de envio que envia uma variável através do método POST.

Esta variável é usada por um arquivo PHP e após um determinado processo, ele insere e atualiza um database MySQL e faz eco de algumas outras coisas.

Isso está funcionando APENAS FINE.

Mas agora eu quero melhorar, evitando a página “recarregar” (indo para o .php).

Eu quero o HTHL que vem como uma saída do meu arquivo HTML para ser mostrado dinamicamente em minha página HTML.

É mais claro agora?

algo assim com jQuery !:

 
Input:

e function para enviar:

 function submitme(){ var tosend=document.getElementById("something").value; $.ajax({ type: 'POST', url: 'toload.php', data: 'something='+tosend, success: function(msg){ if(msg){ document.getElementById("something2").innerHTML=msg; } else{ return; } } }); } 

Você deve usar AJAX (XMLHttpRequest) para isso – http://www.w3schools.com/XML/xml_http.asp .

(Você disse simplesmente – enquanto carregamento longo 100KB de jQuery não é simplesmente IMHO, eu sugeri solução pura de JavaScript)

No seu caso, você pode usar $.post() DOCS . Se você deu seu formulário, um id="myForm" então você poderia carregar os dados de retorno no pai do formulário no retorno de chamada da seguinte maneira:

 $('#myForm').submit(function(e){ e.preventDefault(); $.post("toload.php", $("#myForm").serialize(), function(data) { $(this).parent().html(data); }); });