PHP: Problema presentando forma in AJAX / JSON?
Domanda
Al momento ho seguente codice:
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;
});
Output sulla conferma:
{"textone":"abc","texttwo":"123"}
Domanda
Voglio carico MyText1 valore nel Textone DIV e mytext2 valore nel texttwo DIV utilizzando i dati JSON in _home.php
Suggerimento: Sto usando questa risposta per fare la stessa operazione su evento link click. Ma come fare questo il modulo di presentazione?
Grazie
Soluzione
Hai voglia di analizzare che JSON e impostare i div per i valori che contiene giusto?
var divs = JSON.parse(data);
for (var div in divs) {
document.getElementById(div).innerHTML = divs[div];
}
(sintassi del poster precedente è probabilmente più simile a quello che stai dopo, e forse è più cross-browser compatibile, ma non include l'analisi JSON.)
Dal JSON è solo un sottoinsieme di JavaScript, si può solo eval () esso. JSON.parse () fa in sostanza che, ma ti dà la garanzia che, se i dati '' contiene qualche brutta codice invece di un oggetto semplice, non sarà valutata.
Altri suggerimenti
Nella funzione successo
for (prop in data){
$('#' + prop).html(data[prop]);
}
Ecco la mia soluzione completa 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;
});