Comment soumettre un formulaire avec AJAX/JSON?

Question

Actuellement, mon AJAX fonctionne comme ceci:

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]); 
      } 
     }); 
    }); 
}); 

Le code ci-dessus fonctionne parfaitement. Lorsque je clique sur le lien « One » alors one.php est exécutée et chaîne « One » est chargé dans l'espace de travail DIV.

Question:

Maintenant, je veux soumettre un formulaire avec AJAX. Par exemple j'ai un formulaire en index.php comme ceci.

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

Quand je soumets le formulaire puis one.php doit imprimer la valeur dans l'espace de travail DIV zone de texte.

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

Comment coder js pour soumettre le formulaire avec AJAX/JSON.

Merci

Answer 1

Soumettre le formulaire est facile:

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

Cependant cela republier la page.

Un poste via un appel Ajax est trop facile:

$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 vous souhaitez ensuite faire quelque chose avec le résultat que vous avez deux options - vous pouvez définir explicitement la fonction success (que je l'ai fait ci-dessus) ou vous pouvez utiliser la méthode d'aide load:

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

Malheureusement, il y a un peu en désordre que vous êtes coincé avec: peuplant cet objet data avec les variables de formulaire pour publier.

Cependant, il devrait être une boucle assez simple.

Answer 2

Jetez un oeil à la fonction $.ajaxSubmit dans le jQuery Form Plugin. Devrait être aussi simple que

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

Vous pouvez également lier à la forme soumettre événement afin que toutes les soumissions passent par AJAX, comme l'exemple sur les émissions page liée.

Answer 3

Vous pouvez soumettre le formulaire avec la méthode de jQuery $.ajax comme ceci:

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

Answer 4

Voici ma solution complète:

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; 
});