如何使用getJSON将数据从JSON对象输出为HTML
How to output data as HTML from JSON object using getJSON
你好,我会尽量保持这个简单而简短的
我有一个getJSON函数,它每5秒运行一次。现在,当我使用document.write函数显示数据时,它似乎不想更新。页面陷入加载循环。如何使数据显示在我的页面上?我的JSON很好,但无论如何我都会向您展示。
<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>
这是JSON对象
{
"one": "",
"two": "Beady little eyes",
"three": "Little birds pitch by my doorstep"
}
不要实际使用document.write
。一旦加载页面,就会擦除页面。使用(jQuery的)DOM方法来操作DOM。
$.getJSON('names.json', function(data){
for(var i in data){
$('#myDiv').append(data[i]);
}
});
我建议您使用jQuery,
我用它从json项创建了一个表单,我希望这能帮助。。。
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
}
我的JSON看起来像这个
{
"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
}
}
这段代码将表单添加到id为mainContainer的div标记中我知道它有很多代码,但我希望它能有所帮助!
您想要呈现包含数据的dom,然后在获得数据时更新dom。
作为一个非常简单的例子,在你的页面上有一个容器
<div id="one"></div>
然后在您的ajax成功处理程序中
$("#one").text(json.one);
这使用jquery获取id为"one"的dom元素,并更新其文本。
相关文章:
- 如何使用构造函数's的输出,以便将值插入到对象中
- JavaScript-从对象数组中输出随机OBJECT
- 如何为输出Json对象的ajax调用编写客户端脚本
- EJS 仅输出对象的某些部分
- 如何使用 JQuQuery 解析 JSON 对象并在 HTML 页面中以表格格式打印输出
- PhantomJS 控制台.log对象输出 [对象对象]
- Javascript 对象输出到 Array
- 在模板中为Django表单分离媒体类对象的JS和CSS列表输出
- 如何使用getJSON将数据从JSON对象输出为HTML
- c#linq对象到javascript输出
- 在用于电子表格的Javascript中输出对象中的数组
- 从 Express 发送的对象输出到 Jade 的适当值
- Angularjs,从json对象输出一个字符串或一个字符串数组
- 将我的对象输出为css结构
- Chrome Javascript控制台-使用Console.log(obj)引用对象输出
- 附加文本元素后的对象输出
- 如何格式化对象输出
- 如何从PHP对象输出单行JavaScript
- 在 JavaScript 中显示对象输出
- 我如何从对象输出中删除函数