Envíe un formulario y obtenga una respuesta JSON con jQuery

Question

Espero que esto sea fácil, pero no encuentro una explicación simple en ninguna parte de cómo hacerlo. Tengo un formulario HTML estándar como esto:

<form name="new_post" action="process_form.json" method=POST> 
     <label>Title:</label> 
     <input id="post_title" name="post.title" type="text" /><br/> 

     <label>Name:</label><br/> 
     <input id="post_name" name="post.name" type="text" /><br/> 

     <label>Content:</label><br/> 
     <textarea cols="40" id="post_content" name="post.content" rows="20"></textarea> 
    <input id="new_post_submit" type="submit" value="Create" /> 
</form> 

me gustaría tener Javascript (jQuery) enviar el formulario a la acción de la forma (process_form.json), y recibir una respuesta JSON desde el servidor. A continuación, voy a tener una función de JavaScript que se ejecuta en respuesta a la respuesta JSON, como

function form_success(json) { 
    alert('Your form submission worked'); 
    // process json response 
    } 

¿Cómo cable hasta la forma botón para llamar a mi método form_success presentar cuando se hace? También debe anular la navegación propia del navegador, ya que no quiero abandonar la página. ¿O debería mover el botón fuera del formulario para hacer eso?

Answer 1

Si desea obtener la respuesta en una devolución de llamada, no se puede publicar el formulario. Publicar el formulario significa que la respuesta se carga como una página. Debe obtener los datos del formulario de los campos en el formulario y hacer una solicitud AJAX.

Ejemplo:

$(function(){ 
    $('form[name=new_post]').submit(function(){ 
    $.post($(this).attr('action'), $(this).serialize(), function(json) { 
     alert(json); 
    }, 'json'); 
    return false; 
    }); 
}); 

Tenga en cuenta que usted tiene que volver false del método que controla el evento presentará, de lo contrario el formulario será publicado también.

Answer 2

¿Ha intentado utilizar .getJSON() y .serialize()?

$('form').submit(function() { 
    $.getJSON('ajax/test.json?' + $(this).serialize(), function(data) { 
     $('.result').html('<p>' + data.foo + '</p>' 
     + '<p>' + data.baz[1] + '</p>'); 
    }); 
}); 

• http://api.jquery.com/jQuery.getJSON/
• http://api.jquery.com/serialize/

Answer 3

Si necesitas Publica una solicitud de uso jQuery.post() pasar el argumento de cuarta "json"

$(function(){ 
    $("form").submit(function(){ 
    $.post($(this).attr("action"), $(this).serialize(), function(jsonData){ 
     console.log(jsonData); 
    }, "json"); 
    }); 
}); 

Guffa era más rápido que yo :)