Tutorial Ajax para postar e obter [fechado]

99

Preciso de um tutorial de ajax simples ou estudo de caso para um formulário de entrada simples, onde desejo postar um nome de usuário por meio de um formulário de entrada, que o envia ao banco de dados e responde com os resultados.
Qualquer recomendação para esse tutorial é bem-vinda, porque eu só tenho um usando Mootool, mas estou procurando um usando jQuery!

Reham Fahmy
fonte

Respostas:

167

Você pode tentar isto:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

Este código irá anexar o conteúdo do test.htmlarquivo ao #resultselemento

Você pode encontrar mais informações no site da jQuery .

Atualizar:

Use este código para enviar dados POST e resultados de saída.

var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
});

request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});
apis17
fonte
39

Supondo que você tenha algum html como:

<input type="text" name="username" id="username">
<div id="resultarea"></div>

Você usaria um <script>semelhante:

var myusername = $("#username").val();
$.ajax({
  type: "GET",
  url: "serverscript.xxx",
  data: myusername,
  cache: false,
  success: function(data){
     $("#resultarea").text(data);
  }
});
shaun5
fonte
6
Pode ser necessário definir o nome do parâmetro, como dados: "username =" + myusername
GrandMasterFlush
você também pode fazer ajax para alguns casos com esta biblioteca github.com/Guseyn/EHTML , usando apenas HTML
Guseyn Ismayylov