• 前端界面：Form表单
  • 前端数据提交：使用 ajax 方式 ( 基于jquery )


后台代码：
TestController.java

@Controller
public class TestController {
   


    @RequestMapping("/form")
    public String test(){
   
        return "th/form";
    }

    @RequestMapping("/test1")
    @ResponseBody
    public Student test1(@RequestParam("id") Integer id, @RequestParam("name") String name) {
   
        Student s=new Student();
        s.setId(id);
        s.setName(name);
        return s;
    }

}

前端代码：（注重script部分）
form.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal">
    <div class="form-group">
        <label for="id" class="col-sm-2 control-label">学号</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="id" placeholder="请输入学号">
        </div>
    </div>
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-2">
            <button id="btn" class="btn btn-default" type="button">提交</button>
        </div>
    </div>
</form>
<script> $(document).ready(function () {
      $('#btn').click(function (e) {
      var param = {
      "id": $('#id').val(), "name": $('#name').val() }; $.ajax({
      url: "/test1", //请求的路径 data: param, //传给后台的数据（一般使用json格式） type: "post", //post请求 dataType: "json", //后台返回数据的类型 success: function (data) {
      //data为后台返回的结果 console.log(data.id); console.log(data.name); } }); }); }); </script>
</body>
</html>

Ajax介绍

  • Ajax就是JS这个语言和服务端交互的手段。
  • Ajax 全名 async javascript and XML(异步JavaScript和XML)
  • 是前后台交互的能⼒，也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
  • Ajax 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
  • 是⼀个默认异步执⾏机制的功能，Ajax分为同步（async = false）和异步（async = true）

什么是同步请求？(false)

同步请求是指当前发出请求后，浏览器什么都不能做。
必须得等到请求完成返回数据之后，才会执行后续的代码。
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态。
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态。

什么是异步请求？(默认:true)

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

Jquery Ajax 支持哪些数据类型

  • xml：返回xml文档，可用于jQuery处理
  • html：返回纯文本html信息，包含的script标签会插入dom执行
  • script：返回纯文本JavaScript代码，不会自动缓存结果
  • json：返回json数据
  • jsonp：json格式。使用json形式调用函数
  • text：纯文本字符串