<b>3.4.2 建立視圖設計</b>
1.?建立對話框設計
建立電影時，在電影首頁中打開一個對話框顯示建立的操作界面，對話框設計引用了“artdialog.js”的對話框插件，然後編寫一個腳本來打開對話框，如代碼清單3-17所示。其中“./new”是連接配接控制器的請求url，注意這裡使用了相對路徑，這個url通過“$.get”請求傳回建立電影的html頁面，請求連結中的ts參數傳遞的是目前時間，這是為了保證該連結是一個全新的連結，以使浏覽器能顯示一個最新的内容頁面。
代碼清單3-17 建立電影對話框設計js編碼
function
create(){
$.get("./new",{ts:new
date().gettime()},function(data){
art.dialog({
lock:true,
opacity:0.3,
title: "新增",
width:'750px',
height: 'auto',
left: '50%',
top: '50%',
content:data,
esc: true,
init: function(){
artdialog = this;
},
close: function(){
artdialog = null;
}
});
});
}
2.?建立頁面設計
建立電影的頁面設計，如代碼清單3-18所示，這裡隻是部分html編碼，其中的日期控件使用“wdatepicker.js”插件來實作。對于一部電影來說，我們需要輸入名稱、劇照和日期三個屬性，其中劇照的圖檔下拉清單框使用“imageselect.js”圖檔下拉清單框插件來實作，并且為了簡化設計，劇照中的圖檔檔案使用了預先定義的檔案，這裡隻要選擇使用哪一個圖檔即可。
代碼清單3-18 建立電影頁面html編碼
<link
th:href="@{/styles/imageselect.css}" rel="stylesheet"
type="text/css" />
<script
th:src="@{/scripts/imageselect.js}"></script>
th:src="@{/scripts/movie/new.js}"></script>
<form
id="saveform" action="./save" method="post">
<table
class="addnewinflist">
<tr>
<th>名稱</th>
<td><input
class="inp-list w-200 clear-mr f-left" type="text" id=
"name"
name="name"
maxlength="120" /></td>
<th>劇照</th>
<td width="240">
<select
name="photo" id="photo">
<option th:each="file:${files}"
th:value="${file}"
th:text="${file}">
</option>
</select>
</td>
</tr>
<th>日期</th>
<td>
<input
onfocus="wdatepicker({datefmt:'yyyy-mm-dd hh:mm:ss'})"
type="text"
class="inp-list w-200 clear-mr f-left" id="createdate"
name="createdate"/>
</table>
<div class="bottombtnbox">
<a class="btn-93x38
savebtn" href="javascript:void(0)">确定</a>
backbtn" href="javascript: closedialog()">傳回</a>
</div>
</form>
type="text/javascript">
$(document).ready(function(){
$('select[name=photo]').imageselect({dropdownwidth:425});
</script>
3.?表單驗證與送出設計
驗證建立電影表單的送出時使用“jquery.validate.min.js”插件中的驗證方法來實作，如代碼清單3-19所示。儲存時調用經典的“$.ajax”方式利用post方法進行送出，其中headers: {"content-type":
"application/x-www-form-urlencoded;charset=utf-8"}用于保證資料在傳輸過程中中文字元的正确性。在表單驗證中，隻對name和createdate兩個屬性進行簡單的非空驗證，表單的參數傳遞使用一個表單序列化函數serialize()來實作，它将表單控件上的對象序列化為一個個含有“鍵-值”對的字元串進行送出。
代碼清單3-19 建立電影中表單驗證和送出的js編碼
$(function(){
$('#saveform').validate({
rules: {
name :{required:true},
createdate
:{required:true}
},messages:{
name :{required:"必填"},
createdate :{required:"必填"}
}
$('.savebtn').click(function(){
if($('#saveform').valid()){
$.ajax({
type: "post",
url: "./save",
data:
$("#saveform").serialize(),
headers:
{"content-type": "application/x-www-form-urlencoded;
charset=utf-8"},
success: function (data) {
if (data == 1) {
alert("儲存成功");
pageaction();
closedialog();
} else {
alert(data);
}
},
error:function(data){
var e;
$.each(data,function(v){
e += v + " ";
});
alert(e);
}
});
}else{
alert('資料驗證失敗，請檢查！');
});
4.?建立視圖設計效果
建立電影的視圖設計最後的顯示效果如圖3-3所示。
圖3-3 建立電影視圖設計效果圖
![Java String.format方法的簡單使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)