局部刷新与json

最新推荐文章于 2022-09-02 19:20:54 发布

转载最新推荐文章于 2022-09-02 19:20:54 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Jia-Heng-He465/p/6486550.html

文章标签：

#json #前端 #ViewUI

经过这两天的探索，终于实现了网页的局部刷新和json的运用。话不多说，上码-.-

后台封装将对象数据封装为json类型的数据：

json包org.json.jar包

JSONObject jsonCup = new JSONObject();

list = gDao.queryGoods(sql);

int i =0;
for (Goods goods : list) {

　　JSONObject propertyJsont = new JSONObject();　　 //实例化JSONObj对象（属性）
　　String id = goods.getGid();
　　String name = goods.getGname();
　　float price = goods.getGprice();
　//System.out.println(id + name + price);
　　propertyJsont.put("id", id); 　　　　　　　　　　 //将属性放入jsonCup对象
　　propertyJsont.put("name", name);
　　propertyJsont.put("price", price);
　　jsonCup.put("goods" + i, propertyJsont); //将propertyJson放入jsonCup，一条键值对，代表一个商品数据
　　i++;
}
out.println(jsonObject);

前端ajax获取json数据：

$.ajax({

　　type: "post",
　　url: "/15301197_hejiaheng/selectGoodsAjaxTest",
　　cache: false,
　　async: true,
　　dataType:"json",

　　success: function(data){
　　　　//alert(JSON.stringify(data)); //将data解析为字符串，可以查看data的数据
　　　　var html = ""; //定义html字符串

　　　 for(var key in data){ //得到数据data，遍历
　　　　　　var id = data[key]['id']; 　　　　 //取出key值所对应的value值的id属性，这里有三个属性（id，name，price）
　　　　　　var name = data[key]['name'];
　　　　　　var price = data[key]['price'];
　　　　　　html += "<p>编号:" + id + " 名称：" + name + " 价格:" + price + "</p>"; //拼接html字符
　　　　}

　　$("#goodsList").html(html); //html语句写入id = “goodsList ”的div中，即实现局部的数据加载。
},

　　error: function(error){
　　　　alert("获取信息失败！" + textStatus);
　　}
});

这是一次性的局部刷新，还有按时的局部刷新，即计时器+这种方法可以实现。

经过测试后，我用它改进了以前小组做的一个网站作品上首页的快速查找功能，确实比全局刷新好多了。