PHP: Problème de soumission de formulaire en AJAX/JSON?

Question

actuellement je code suivant:

home.php

<form name='myformname' id='myformid'> 
    <input type='text' name='mytext1' value='abc'> 
    <input type='text' name='mytext2' value='123'> 
    <input type='submit' value='Submit'> 
</form> 

<div id='textone'></div><div id='texttwo'></div> 

_home.php

$arr = array('textone' => $_POST['mytext1'], 'texttwo' => $_POST['mytext2']); 
echo json_encode($arr); 

ajax.js

jQuery('#myformid').live('submit',function(event) { 
    $.ajax({ 
     url: '_home.php', 
     type: 'POST', 
     data: $('#myformid').serialize(), 
     success: function(data) { 
      // TODO: write code here to get json data and load DIVs instead of alert 
      alert(data); 
     } 
    }); 
    return false; 
}); 

Sortie sur soumettre:

{"textone":"abc","texttwo":"123"} 

Question

Je veux charger mytext1 valeur dans TextOne DIV et mytext2 valeur texttwo DIV en utilisant des données JSON dans _HOME. php

Indice: J'utilise this answer pour faire la même chose sur l'événement click de lien. Mais comment faire cela sur la soumission de formulaire?

Merci

Answer 1

Vous voulez juste analyser cette JSON et définir les divs aux valeurs qu'il contient non?

var divs = JSON.parse(data); 
for (var div in divs) { 
    document.getElementById(div).innerHTML = divs[div]; 
} 

(syntaxe de l'affiche précédente est probablement plus comme ce que vous êtes après, et est peut-être plus multi-navigateurs compatibles, mais ne comprend pas l'analyse syntaxique JSON.)

Depuis JSON est un sous-ensemble de JavaScript, vous pouvez juste eval(). JSON.parse() le fait essentiellement, mais vous donne l'assurance que si 'data' contient du code malveillant au lieu d'un simple objet, il ne sera pas évalué.

Answer 2

Dans la fonction succès

for (prop in data){ 
    $('#' + prop).html(data[prop]); 
} 

Answer 3

Voici ma solution complète de JS:

jQuery('#myformid').live('submit',function(event) { 
    $.ajax({ 
     url: '_home.php', 
     type: 'POST', 
     dataType: 'json', 
     data: $('#myformid').serialize(), 
     success: function(data) { 
      for(var id in data) { 
       //jQuery('#' + id).html(data[id]); // This will also work 
       document.getElementById(id).innerHTML = data[id]; 
      } 
     } 
    }); 
    return false; 
});