Wie für die Ausgabe von Daten als HTML aus dem JSON-Objekt mit getJSON

Hallo, ich werde versuchen, und halten Sie diese einfache und kurze

Ich habe eine getJSON-Funktion, die ausgeführt wird, alle 5 Sekunden. Wenn ich jetzt die Daten anzeigen, die durch die Verwendung von Dokumenten.schreiben Funktion, die es dosent scheinen zu wollen, Sie zu aktualisieren. Die Seite ist stuck in a loading loop. Wie bekomme ich die Daten für die Anzeige auf meine Seite? Meine JSON ist in Ordnung, aber ich zeige Sie sowieso.

  <script type="text/javascript">

 $.ajaxSetup ({  
    cache: false  
     });  

    setInterval(function(){ $.getJSON('names.json', function(data) {

    for(i in data)  {

        document.write(data[i] + "<br/>");
    }

  });



},5000);

 </script>

Dies ist das JSON-Objekt

{
  "one": "",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}

InformationsquelleAutor Matthew Underwood | 2012-07-18

3

Nicht wirklich document.write. Sobald die Seite geladen wird, das löschen der Seite. Verwenden (jQuery) DOM-Methoden zum manipulieren des DOM.
```
$.getJSON('names.json', function(data){
    for(var i in data){
        $('#myDiv').append(data[i]);
    }
});
```
InformationsquelleAutor Rocket Hazmat

Ich würde empfehlen, dass Sie jQuery verwenden,

Ich diese verwendet, um erstellen Sie ein Formular von meinem json-Element, ich hoffe, das hilft...

function jsonFormCreator(frmJSON)
{
    var createdHTML = ""; var elementType, id;
    console.log(JSON.stringify(frmJSON));



    for(item in frmJSON)
    {
        formElement = frmJSON[item];    elementType = formElement.elementType;  id = formElement.id;

        if(elementType == "input")
        {
            createdHTML += "<input id='" + id +"'";
            if(formElement.type == "checkbox") 
            {createdHTML += " type='" + formElement.type + "' checked='" + formElement.checked + "'";}
            else{createdHTML += "type='" + formElement.type + "' value='" + formElement.value + "' onclick='" + formElement.onclick + "'";}
            createdHTML += "/><br>"
        }
        else if(elementType == "textarea")
        {createdHTML += "<textarea id='" + formElement.id  + "' rows='" + formElement.rows +  "' cols='" + formElement.cols + "' value='" + formElement.value + "'></textarea><br>";}
        else if(elementType == "select")
        {
            var options = formElement.values;
            createdHTML += "<select id='" + formElement.id+ "'>";
                for(i = 0 ; i < options.length ; i++)
                {createdHTML += "<option value='" + options[i][0] + "'>" + options[i][1] + "</option>";} //Adding each option
            createdHTML+= "</select><br>";
        }
    }
    console.log("Complete");console.log(createdHTML);
    document.getElementById('mainContainer').innerHTML = createdHTML;//Adding to the DOM
}

Und mein JSON, würde so Aussehen

{
    "0": {
        "elementType": "input",
        "id": "frm1",
        "type": "text",
        "value": "form Liam",
        "label": "Test Text Input"
    },
        "itemBTN": {
        "elementType": "input",
        "id": "frmAlert",
        "type": "button",
        "onclick" : "loader(homePage);",
        "value": "Home Page",
        "label": ""
    },
    "item2": {
        "elementType": "textarea",
        "id": "frm2",
        "rows": 5,
        "cols": 30,
        "value": "helddddddddlo",
        "label": "Test Textarea"
    },
    "item3": {
        "elementType": "select",
        "id": "frm3",
        "values": [
            [
                "value1",
                "Pick Me"
            ],
            [
                "value2",
                "UserDis2"
            ],
            [
                "value3",
                "UserDis3"
            ],
            [
                "value4",
                "UserDis4"
            ],
            [
                "value5",
                "UserDis5"
            ],
            [
                "value6",
                "UserDis6"
            ]
        ],
        "label": "Test Select"
    },
    "item4": {
        "elementType": "input",
        "id": "frm4",
        "label": "Checkbox",
        "type": "checkbox",
        "checked": true
    }
}

Dieser code fügt die form in meine div-tag mit der id mainContainer
Ich weiß, das ist eine Menge code, aber ich hoffe, es hilft !

InformationsquelleAutor LmC

1

Den Sie Rendern möchten-dom, die die Daten enthält, dann, wenn Sie den Daten, die Aktualisierung der dom.

Als ein überaus einfaches Beispiel auf Ihrer Seite ein container,
```
<div id="one"></div>
```
und dann in deinem ajax-success-handler
```
$("#one").text(json.one);
```
Diese verwendet jquery zu packen, das dom-element mit der id "eins", und aktualisiert den text.

InformationsquelleAutor hvgotcodes

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.