springboot + ajax 简单交互

项目结构如图所示，由于没有使用thymeleaf模版所以删掉了文件夹：

前端页面代码：

登录页：

    
    


提交

登录后的列表页： 

注意引入的静态资源路径，springboot默认读取static下的文件，所以你只需写出相对于static文件夹的相对路径即可

后端Controller代码：

package com.example.demo.controller;

import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;

/**
 * @ClassName HelloController
 * @Description TODO
 * @Author Rock-PC5
 * @Date 2018/9/13 9:02
 * @Version 1.0
 **/
@RestController
public class HelloController {

    //模拟用户登录验证
	@RequestMapping(value = "/login/{username}/{password}",method = RequestMethod.GET)
	public Object login(@PathVariable String username,@PathVariable String password){
		System.out.println(username);
		System.out.println(password);
		return "success";
	}

    //模拟现实用户信息
	@RequestMapping(value = "/list")
	public Object list(){
		String username = "root";
		String password = "123456";
		HashMap objectObjectHashMap = new HashMap<>(1);
		objectObjectHashMap.put("username",username);
		objectObjectHashMap.put("password",password);
		return objectObjectHashMap;
	}
}

@RestController主要起到@Controller + @ResponseBody的作用

它使得整个Controller的每一个方法都返回json数据，因为个人感觉jsp有些慢，现在的h5都是先加载页面再渲染数据，所以跳转页面的工作并不需要你来做，交给前端就好。

@RequestMapping主要起到设置请求路径的作用

value为请求路径，请求路径就是我们常说的接口，本测试的接口符合restful风格，这么写的原因就是看起来简洁高大上；

method为请求类型，请求类型常用的有get、post，不常用的有delete、options、put、head、patch等等，如果以后要做tomcat options禁用，会把不常用的都禁用掉，如果你没有接触过，就只用get和post就行。

@PathVariable主要起到取请求路径中的参数的作用

它后面的参数名必须要与路径中{}里的参数名一致，不然会报错，否则你可以使用@PathVarible里的参数value来绑定路径中的参数，大概长这个样子：

@PathVariable(value = "username") String newUsername

现在我们来测试一下，static下的东西都能直接访问，所以我们直接访问http://localhost:8080/view/login.html，注意别加static，效果就是一个提交按钮，现在我们点击这个提交按钮：

看看后端，参数已经成功传到后端了：

然后就是渲染页面：