局部刷新與json

通過這兩天的探索，終於實現了網頁的局部刷新和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);
　　}
});

 

這是一次性的局部刷新，還有按時的局部刷新，即計時器+這種方法能夠實現。

通過測試後，我用它改進了之前小組作的一個網站做品上首頁的快速查找功能，確實比全局刷新好多了。