¿Cómo se sobrescribe un formulario html existente para usar jquery para publicar el formulario?

Question

Tengo un formulario simple que actualmente estoy publicando en el servidor para actualizar un alias. ¿Qué código de jquery agrego (sin cambiar el formulario) para que la página no se actualice, pero jquery publicará el formulario en el fondo y luego aparecerá un mensaje de alerta que contiene la respuesta del servidor?

<form method="post" action="http://www.myserver.com/update_nickname" name="input"> 
    Quick form to test update_nickname:<br> 
    New nickname:<input type="text" value="BigJoe" name="newNickname"><br> 
    <input type="submit" value="Submit"> 
</form> 

<script src="jquery-1.4.2.min.js" type="text/javascript"> </script> 

Answer 1

try reading this.

o

$("form").submit(function(e){ 
    var form = $(this); 
    $.ajax({ 
     url : form.attr('action'), 
     type : form.attr('method'), 
     data : form.serialize(), // data to be submitted 
     success: function(response){ 
      alert(response); // do what you like with the response 
     } 
    }); 
    return false; 
}); 

Answer 2

Debe utilizar jQuery para enlazar al evento "enviar" y evitar la acción predeterminada. Sería un poco más eficiente si el formulario y el apodo de entrada utiliza id 's, además de sus nombres:

<script type="text/javascript"> 
    jQuery(function($){ 
     $("form[name=input]").submit(function(e){ 
     e.preventDefault(); // Keep the form from submitting 
     var form = $(this); 

     // Use the POST method to post to the same url as 
     // the real form, passing in newNickname as the only 
     // data content 
     $.post(form.attr('action'), { newNickname: form.find(':text').val() }, function(data){ 
      alert(data); // Alert the return from the server 
     }, "text"); 
     }); 
    }); 
</script> 

Answer 3

Hay un plugin sólo para esto.

http://jquery.malsup.com/form/