¿Cómo enviar un formulario con AJAX/JSON?

Question

Actualmente mi AJAX está trabajando de esta manera:

index.php

<a href='one.php' class='ajax'>One</a>  
<div id="workspace">workspace</div> 

one.php

$arr = array ("workspace" => "One"); 
echo json_encode($arr); 

ajax.js

jQuery(document).ready(function(){ 
    jQuery('.ajax').live('click', function(event) { 
     event.preventDefault(); 
     jQuery.getJSON(this.href, function(snippets) { 
      for(var id in snippets) { 
       jQuery('#' + id).html(snippets[id]); 
      } 
     }); 
    }); 
}); 

El código anterior funciona a la perfección. Cuando hago clic en enlace 'Uno' continuación one.php se ejecuta y Cadena "Uno" se carga en DIV espacio de trabajo.

Pregunta:

Ahora quiero presentar un formulario con AJAX. Por ejemplo, tengo un formulario en index.php de esta manera.

<form id='myForm' action='one.php' method='post'> 
<input type='text' name='myText'> 
<input type='submit' name='myButton' value='Submit'> 
</form> 

Cuando envío del formulario y luego one.php debe imprimir el valor de texto en el espacio de trabajo DIV.

$arr = array ("workspace" => $_POST['myText']); 
echo json_encode($arr); 

Cómo codificar js para enviar el formulario con AJAX/JSON.

Gracias

Answer 1

enviar el formulario es fácil:

$j('#myForm').submit(); 

Sin embargo habrá que después de vuelta toda la página.

Una entrada a través de una llamada Ajax es también muy fácil:

$j.ajax({ 
    type: 'POST', 
    url: 'one.php', 
    data: { 
     myText: $j('#myText').val(), 
     myButton: $j('#myButton').val() 
    }, 
    success: function(response, textStatus, XMLHttpRequest) { 
     $j('div.ajax').html(response); 
    } 
}); 

Si a continuación desea hacer algo con el resultado tiene dos opciones - o bien se puede establecer explícitamente la función success (que he hecho arriba) o puede usar el método load ayudante:

$j('div.ajax').load('one.php', data); 

Por desgracia hay un poco desordenado que le pegan con: poblar que data objeto con las variables de formulario para publicar.

Sin embargo, debería ser un bucle bastante simple.

Answer 2

Eche un vistazo a la función $.ajaxSubmit en el jQuery Form Plugin. Debe ser tan simple como

$('#myForm').ajaxSubmit(); 

También puede enlazar con el formulario de envío evento para que todos los envíos pasan a través de AJAX, como el ejemplo de los espectáculos página enlazada.

Answer 3

Puede enviar el formulario con el método de jQuery $.ajax así:

$.ajax({ 
url: 'one.php', 
type: 'POST', 
data: $('#myForm').serialize(), 
success:function(data){ 
    alert(data); 
} 
}); 

Answer 4

Aquí está mi solución completa:

jQuery('#myForm').live('submit',function(event) { 
    $.ajax({ 
     url: 'one.php', 
     type: 'POST', 
     dataType: 'json', 
     data: $('#myForm').serialize(), 
     success: function(data) { 
      for(var id in data) { 
       jQuery('#' + id).html(data[id]); 
      } 
     } 
    }); 
    return false; 
});