实验一：Web基础

[zengsn]

一、实验目的

练习并掌握简单HTML网页制作方法。

二、实验设备与环境

操作系统：Windows；开发平台：GitHub；开发工具：Sublime Text。

三、实验内容及步骤

1. 安装和配置Git代码开发环境
   要求：成功安装Git工具；Fork实验库，将自己帐号下的实验库克隆到本地；结果截图到实验报告。
   提示：git clone https://github.com/{你的账号}/java-web.git
2. 编写一个表单网页
   要求：
   （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中的信息。
3. 将代码提交到自己Fork的实验库
4. 将实验结果填写到实验报告中
   要求：实验报告上传到 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": "保存成功！"
}