PHP: Problem einreichen Form in AJAX / JSON?

Question

zur Zeit habe ich folgenden Code:

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

Ausgabe auf einreichen:

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

Frage

ich zu ladende mytext1 Wert in Textone DIV und mytext2 Wert in texttwo DIV mit JSON-Daten in _home.php

Hinweis: Ich bin mit diese Antwort die gleiche Aufgabe auf den Link Click-Ereignis zu tun. Aber wie diese Vorlage auf dem Formular zu tun?

Danke

Answer 1

Sie wollen einfach nur zu analysieren, dass JSON und legen Sie die divs auf die Werte, die sie enthält nicht wahr?

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

(Zurück Plakat Syntax ist wahrscheinlich eher, was Sie nach, und vielleicht ist Cross-Browser kompatibel, nicht jedoch die JSON-Analyse).

Da JSON ist nur eine Teilmenge von JavaScript, können Sie einfach eval () es. JSON.parse () im Grunde tut, sondern gibt Ihnen die Zusicherung, dass, wenn ‚Daten‘ enthalten einigen bösen Code anstelle einer einfachen Aufgabe, es wird nicht ausgewertet werden.

Answer 2

In der Erfolgsfunktion

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

Answer 3

Hier ist meine komplette JS Lösung:

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