最近公司类似SNS的社区项目,开始接触WEB前端技术,在已经切好的页面基础上套页面。
首先要做的,是根据后台提供的接口写前端接口(写成Action,Servlet,JSP都行),在前端接口进行数据提取与数据拼接,拼成json格式的数据再写回页面中。
然后就是写js函数对返回的json格式数据进行处理,写入HTML元素里面,以达到需求要求。
下面是一个简单的例子
如后台提供了一个获取用户等级的接口
前端接口(Action函数)
前端JS处理
如页面中有这样一个标签
当然,你也可以一次请求多组数据,加入更多更复杂的逻辑。
这不是一篇高深的文章,只是写下当作学习笔记,方便自己和其他初学者 :D 。
首先要做的,是根据后台提供的接口写前端接口(写成Action,Servlet,JSP都行),在前端接口进行数据提取与数据拼接,拼成json格式的数据再写回页面中。
然后就是写js函数对返回的json格式数据进行处理,写入HTML元素里面,以达到需求要求。
下面是一个简单的例子
如后台提供了一个获取用户等级的接口
public int getUserLevel(long userId){...}
前端接口(Action函数)
public void getUL()
{
String json = "";
json += "{userLevel:" + getUserLevel(userId) + "}"; //拼接成JSON格式
HttpServletResponse response = org.apache.struts2.ServletActionContext.getResponse();
response.setContentType("text/html");
response.getOutputStream().write(json.getBytes()); //写回页面
}
前端JS处理
如页面中有这样一个标签
<span>等级:<dd id="ul"></dd></span>
<script type="text/javascript">
var ul= $("ul");
function getUserLevel()
{
var ajax = new Haley.Ajax({url:"http://localhost:8080/user/getUL.at?t=" + new Date().getTime(), method:"get",parameters:{"userId":${userId}}}); /* 请求了Action中的getUL方法,用的是自己写的AJAX的类 */
ajax.onComplete = function(responseObject)
{
var response = eval('(' + responseObject.textString + ')');/* 返回的json数据 */
ul.innerHTML = response.userLevel;/* 将ul标签内的HTML内容设置为返回的用户等级值 */
};
ajax.start();
}
getUserLevel();/* 这里是为了页面打开或刷新里执行一次此函数 */
</script>
当然,你也可以一次请求多组数据,加入更多更复杂的逻辑。
这不是一篇高深的文章,只是写下当作学习笔记,方便自己和其他初学者 :D 。