记一次前端界面编写的收获

Js实现在html中插入代码

document.getElementById("test1").innerHTML ='<h2>'+msg.name+'</h2>';
这一句表示在html文件中的test1元素中插入html代码<h2>+msg.name+</h2>

ajax收获

$.ajax ({
				"dataType" : "json",
    		 	"url" :Url,    //url地址
    		 	"type":'post',
    		 	"success":function (msg)   //成功
    		 	{
					document.getElementById("test1").innerHTML ='<h2>'+msg.name+'</h2>';
					//$("#task-info").modal("open");				
    		 	},
    		 	"error":function()   //失败
				{
					layer.msg("操作失败，请重试~",{time: 1000, icon:0});
				}
			});
});

动态创建 div插入代码并显示在body里面

var div = document.createElement('div'); 
div.innerHTML ='<h2>'+msg.name.split(",")[i]+'</h2>';
document.getElementsByTagName('body')[0].appendChild(div);

关于处理Json数据

List<Record> arr = messageService.findAllByMessage_id(message_id);
		//JSONObject getObj = new JSONObject();
		//getObj.put("data",RecordToJsonArrUtils.RecordToJsonArr(arr));
		renderJson(RecordToJsonArrUtils.RecordToJsonArr(arr));

后台直接将从数据库中获取到的record数据转换为Json格式，前台处理Json就相当于处理一个数组

for(var i in msg)
	{
		alert(msg[i].Message_introduction);   //直接根据关键字获取信息
		var div = document.createElement('div'); 
		div.innerHTML ='<h2>'+msg[i].Message_introduction+'</h2>';
		document.getElementsByTagName('body')[0].appendChild(div);
	}