<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=)