只有javascript和html页面可以实现，js变量动态显示到html页面吗？

0 0

只有javascript和html页面可以实现，js变量动态显示到html页面吗？0

js获得一个json对象，json对象包含很多信息比如name,size之类的。在jsp中可以把java获得的对象信息通过<% %>的方式嵌入到html页面。如果只有javascript和html可以实现这种效果吗？比如js获得一个json对象 {
            "fsize": 907,
            "ftype": "file",
            "fname": "20140905.txt",
            "fileid": 1
        }
如果把这些fname、fsize信息动态显示在html的<td></td>直接那，或者有那些js框架可以解决这些问题

PhoneGap

2014年10月21日 10:57

javachs
2
0 0 5

5个答案按时间排序按投票排序

0 0

简单易用的有：avalon.js (国产货，推荐，非常易用)，knockout.js

高大上的有：ember.js, angular.js （但这些如果你不是专业搞js的建议谨慎选择）

你的需求用avalon.js来做，就是

<div ms-controller="FilesCtrl">
<table>
<tr ms-repeat-file="files">
    <td>{{fsize}}</td>
    <td>{{ftype}}</td>
    <td>{{fname}}</td>
    <td>{{ffield}}</td>
</tr>
</table>
</div>

<script>
avalon.define("FilesCtrl", function(vm) {
    vm.files=[
       { 
            "fsize": 907, 
            "ftype": "file", 
            "fname": "20140905.txt", 
            "fileid": 1 
       }
    ]
})
</script>

2014年10月23日 06:04

kidneyball
205
0 1 13

添加评论

0 0

如果页面上得到是一个json对象的话，应该是可以直接引用其属性的：
var obj = jsonObj;
var fsize = obj.fsize;

2014年10月22日 10:46

gagapear
73
0 0 7

添加评论

0 0

我之前写个极其简单的，希望能给楼主点小帮助

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JTMA</title>
<script type="text/javascript" src="../js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body onload="test()">
<div>
	<table>
		<tr>
			<td>通知</td>
			<td id="notice">
				<ul>
					<li>$title$&nbsp;&nbsp;&nbsp;<span>$data$</span></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>国内新闻</td>
			<td id="inside_news">
				<ul>
					<li>$title$&nbsp;&nbsp;&nbsp;<span>$data$</span></li>
				</ul>
			</td>
		</tr>
		<tr>
			<td>国外新闻</td>
			<td id="outside_news">
				<ul>
					<li>$title$&nbsp;&nbsp;&nbsp;<span>$data$</span></li>
				</ul>
			</td>
		</tr>
	</table>
</div>
</body>
</html>

/**
 * 比如数据库的字段设计为:
 * id 主键自增
 * title 主题
 * data 发布日期
 * type 类型(通知、国内新闻、国外新闻) 
 */

String.prototype.temp = function(obj) {
	//返回替换后的值
    return this.replace(/\$\w+\$/gi, function(matchs) {
    	//matchs输出符合正则表达式"$\w+\$"的所有字符串,如$data$
    	//matchs.replace(/\$/g, "")就是将$替换为"",如$data$替换后为data
        var returns = obj[matchs.replace(/\$/g, "")];
        return (returns + "") == "undefined"? "": returns;
    });
};

test = function(){
	
	var jsonData_notice = {
	    //url: "/project/xxx.do?method=xxx",
	    data: [{
	        id: "11",
	        title:"通知1",
	        data:"2014/09/12"
	    },{
	        id: "12",
	        title:"通知2",
	        data:"2014/09/11"
	    },{
	        id: "13",
	        title:"通知3",
	        data:"2014/09/10"
	    }]
	};
	
	var jsonData_inside_news = {
	    //url: "/project/xxx.do?method=xxx",
	    data: [{
	        id: "21",
	        title:"国内新闻1",
	        data:"2014/09/12"
	    },{
	        id: "22",
	        title:"国内新闻2",
	        data:"2014/09/11"
	    },{
	        id: "23",
	        title:"国内新闻3",
	        data:"2014/09/10"
	    }]
	};
	
	var jsonData_outside_news = {
	    //url: "/project/xxx.do?method=xxx",
	    data: [{
	        id: "31",
	        title:"国外新闻1",
	        data:"2014/09/12"
	    },{
	        id: "32",
	        title:"国外新闻2",
	        data:"2014/09/11"
	    },{
	        id: "33",
	        title:"国外新闻3",
	        data:"2014/09/10"
	    }]
	};
	
	var htmlList_notice = "";
	var htmlList_inside_news = "";
	var htmlList_outside_news = "";
	var htmlTemp = $("#notice").html();
	
	var notice_temp = htmlTemp;
	var inside_news_temp = htmlTemp;
	var outside_news_temp = htmlTemp;
	jsonData_notice.data.forEach(function(object) {
		htmlList_notice += notice_temp.temp(object);
	});
	jsonData_inside_news.data.forEach(function(object) {
		htmlList_inside_news += inside_news_temp.temp(object);
	});
	jsonData_outside_news.data.forEach(function(object) {
		htmlList_outside_news += outside_news_temp.temp(object);
	});
	$("#notice").html(htmlList_notice);
	$("#inside_news").html(htmlList_inside_news);
	$("#outside_news").html(htmlList_outside_news);

};

2014年10月22日 08:30