Ocean 學習筆記: 2014年4月14日

2014年4月14日星期一

application/x-www-form-urlencoded

Jquery ajax contentType 預設為： 'application/x-www-form-urlencoded; charset=UTF-8'

可用有：

application/x-www-form-urlencoded
application/json
text/xml

要注意：如果不是使用 application/x-www-form-urlencoded 在Servlet端無法從request.getparameter(key)，取回資料，只能從StreamInput中取得。

form 的enctype 發送格式預設是：'application/x-www-form-urlencoded;
可用有：

application/x-www-form-urlencoded
multipart/form-data
text/plain

jsrender 範例

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="author" content="hua" />
<script src="../js/jquery-1.8.1.min.js"></script>
<script src="../js/jsrender.min.js"></script>
<style>
.table201404120200{
}

.table201404120200 td{
border: solid 1px #CCCCCC;
}
</style>
</head>
<body>
<div id="content20140412">
</div>


<script id="mainTmpl201404120200" type="text/x-jsrender">
<table width="400px" class='table201404120200'>
<thead>
<tr ><th colspan="4">{{:title}}</th></tr>
</thead>
<tbody>
<tr>
<td>品名</td>
<td>數量</td>
<td>成本</td>
<td>售價</td>
<td>價差</td> 
<td>價差*2</td>
<td>index</td>
<td>color</td>
</tr>
</tr>
{{for data tmpl="#reportTmpl201404120200" /}}
</tbody>
</table>
</script>

<script id="reportTmpl201404120200" type="text/x-jsrender">
<tr>
<td>{{: nam }}</td>
<td>{{: quantity }}</td>
<td>{{: cost }}</td>
<td>{{: price}}</td>
<td>{{: ~method( price , cost)}}</td> 
<td>{{: ~method( price , cost) * 2}}</td> 
<td>{{: #index }}</td>
{{if #index % 2 == 0}}
<td style="background:#FF0080 ">#FF0080</td>
{{else}}
<td style="background:#FF8000 ">#FF8000</td>
{{/if}}

</tr>
</script>

<script>
(function(){
//資料,以資料驅動畫面
var report = {
title : '貨品資訊列表',
data : [
{
nam : '精工表',
quantity : 2,
cost : 10000,
price : 30000,
},
{
nam : '魯夫公仔',
quantity : 20,
cost : 100,
price : 399,
},
{
nam : 'RX-78 RG 1/144',
quantity : 10,
cost : 500,
price : 1000,
}
]
};

function difference(price, cost){
return price - cost;
}

var html = $("#mainTmpl201404120200").render(report , {method : difference});
//console.log(html);
$('#content20140412').html(html);
})();
</script>
</body>

Ocean 學習筆記

2014年4月14日星期一

application/x-www-form-urlencoded

jsrender 範例

常拜讀的Blog

關於我自己

2014年4月14日 星期一

application/x-www-form-urlencoded

jsrender 範例

2014年4月14日星期一