实验一：Web基础 #2
Description
一、实验目的
练习并掌握简单HTML网页制作方法。
二、实验设备与环境
操作系统：Windows；开发平台：GitHub；开发工具：Sublime Text。
三、实验内容及步骤
- 安装和配置Git代码开发环境
要求：成功安装Git工具；Fork实验库，将自己帐号下的实验库克隆到本地；结果截图到实验报告。
提示：git clone https://github.com/{你的账号}/java-web.git - 编写一个表单网页
要求：
（1）基于 http://www.bootcss.com/ 上的前端CSS库；
（2）根据自选题目编写一个带表单的网页；
（3）通过JavaScript或jQuery实现表单提交；
（4）表单处理结果保存在一个JSON文件中；
（5）提交成功之后JS弹窗显示JSON文件的内容（提示信息）；
（6）所有文件保存在个人目录下：labs/学号/，见：https://github.com/hzuapps/java-web。
提示：
（1）建议选择 http://v3.bootcss.com/ 库；
（2）创建网页文件：labs/{你的学号}/index.html；
（3）使用 <link>标签引用 Bootstrap 的CSS文件，或者使用CDN，参考：http://v3.bootcss.com/getting-started/ ；
（4）编写表单，参考：http://v3.bootcss.com/css/#forms；
（5）创建JSON文件：labs/{你的学号}/success.json；
（6）创建JavaScript文件：labs/{你的学号}/index.js；
（7）使用jQuery提交代码，并显示JSON中的信息。 - 将代码提交到自己Fork的实验库
- 将实验结果填写到实验报告中
要求：实验报告上传到 http://zeng.shaoning.net/javaweb/uploads/ 。
代码及命令提示
- 提交代码到GitHub
$ git pull
$ git add labs/{你的学号}/*
$ git commit -m "#2 提交实验代码"
$ git push
- 编写表单代码
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
- 使用jQuery处理表单提交
http://api.jquery.com/submit/
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
- 使用jQuery请求JSON文件并显示内容
http://api.jquery.com/jQuery.ajax/
$.ajax({
url: "success.json
}).done(function(data) {
if ( console && console.log ) {
console.dir(data);
alert(data.msg);
}
});
- JSON文件内容
{
"msg": "保存成功！"
}
Reactions are currently unavailable