PHP: Problème présentation sous forme 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 charge mytext1 dans TextOne DIV et mytext2 valeur texttwo DIV à l'aide de données JSON dans _home.php
Conseil: J'utilise cette réponse faire la même tâche sur événement click lien. Mais comment faire sur la soumission du formulaire?
Merci
La solution
Vous voulez juste que parser JSON et définir les divs aux valeurs qu'il contient droit?
var divs = JSON.parse(data);
for (var div in divs) {
document.getElementById(div).innerHTML = divs[div];
}
(la syntaxe de l'affiche précédente est probablement plus comme ce que vous êtes après, et est peut-être plus compatible multi-navigateur, mais ne comprend pas l'analyse syntaxique JSON.)
Depuis JSON est un sous-ensemble de JavaScript, vous pouvez juste eval () il. JSON.parse () fait essentiellement, mais vous donne l'assurance que si « données » contient un code méchant au lieu d'un simple objet, il ne sera pas évaluée.
Autres conseils
Dans la fonction de réussite
for (prop in data){
$('#' + prop).html(data[prop]);
}
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;
});