SpringMVC(续)

五八个

已于 2022-03-23 16:56:59 修改

阅读量762

点赞数 1

文章标签： java 前端开发语言

于 2022-02-08 16:29:56 首次发布

本文链接：https://blog.csdn.net/qq_44840708/article/details/122815502

版权

SpringMVC参数传递

同名参数提交

页面说明

复选框: name=“hobby” 口篮球口排球口乒乓球
问题: 参数如何提交? hobby=篮球,排球,乒乓球
前端URL模式: http://localhost:8080/user/saveHobby?hobby=篮球,排球,乒乓球

解决代码：

 /**
     * URL地址: http://localhost:8080/user/saveHobby?hobby=篮球,排球,乒乓球
     * 返回值: 参数获取之后返回
     * SpringMVC功能:
     *      如果url中的参数使用,号的方式连接,则可以自动的转化为数组结构
     */
    @GetMapping("/saveHobby")
    public String[] saveHobby(String[] hobby){
        //String[] arrays = hobby.split(",");
        //将字符串转化为数组,可以方便后续业务的调用
        //return arrays;
        return hobby;
    }

运行结果：

Ajax

概念

用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

特点

局部刷新,异步访问

同步请求
浏览器发起请求到服务器时,如果服务器没有响应,用户则无法获取页面数据,处于等待状态.不可以做其它的操作.
异步请求
异步请求时,浏览器可以进行其它的操作.当ajax数据获取之后,信息在页面的局部刷新. (可以理解为多线程操作方式)

原理

Ajax为什么可以异步: 中间有Ajax引擎.

回调函数: 服务器返回数据,通过回调函数通知用户.

在这里插入图片描述

前后端异步调用入门案例

1.导入三阶段的js包

2.前端js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>入门案例</h1>
		<script src="../js/axios.js"></script>
		<script type="text/javascript">
			let url1="http://localhost:8080/axios/findstr"
			axios.get(url1).then(function(result){
				console.log(result.data)
			})
		</script>
	</body>
</html>

3.编辑AxiosController

package com.jt.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/axios")
@CrossOrigin
//http://localhost:8080/axios/findstr
public class AxiosController {
    @GetMapping("/findstr")
    public String findstr(){
        return "牛逼";
    }
}

运行结果：

前后端调用-带简单参数

js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>入门案例</h1>
		<script src="../js/axios.js"></script>
		
			let url2="http://localhost:8080/axios/getUserById?id=100";
			axios.get(url2).then(function(result){
				console.log(result.data)
			})
			
		</script>
	</body>
</html>

编辑AxiosController

@GetMapping("/getUserById")
    public String findUserById(Integer id){

        return "获取数据:"+id;
    }

前后端调用-对象传参

js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>入门案例</h1>
		<script src="../js/axios.js"></script>
		<script type="text/javascript">
			axios.defaults.baseURL="http://localhost:8080"
			let user={id:100,name:"tomcat"}
			axios.get("/axios/finduser",{params:user}).then(function(promise){
				console.log(promise.data)
			})
		</script>
	</body>
</html>

编辑AxiosController

@GetMapping("/finduser")
    public User finduser(User user){
        return user;
    }

运行结果

前后端调用-ResultFul结构

js代码

//4.RestFul结构实现数据传递  第一种:简单操作
			let rest1 = {id: 100,name: "tomcat"}
			axios.get("/axios/result/"+rest1.id+"/"+rest1.name)
				 .then(function(promise){
					 console.log(promise.data)
				 })
			
			/**
			 * 5.RestFul结构实现数据传递  ]
			 *  第二种:模板字符串写法
			 * 语法: 	反引号  ` `
			 * 字符取值: ${rest2.id}
			 * 作用: 1.常见字符串拼接
			 * 		 2.可以保证代码的数据结构
			 */
			let rest2 = {id: 100,name: "tomcat"}
			axios.get(`/axios/result/${rest2.id}/${rest2.name}`)
			
			
			//模板字符串 保证代码格式
			let div = `<div>
							<p>天青色等烟雨</p>
							<p>而我在等你</p>
							<p>炊烟袅袅升起</p>
							<p>隔江千万里</p>
					   </div>`

编辑AxiosController

 /**
     * 4.接收restFul的数据
     * URL: http://localhost:8080/axios/result/100/tomcat
     * 返回值: User对象
     */
    @GetMapping("/result/{id}/{name}}")
    public User result(User user){

        return user;
    }

前端POST提交方式

js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>axios-post案例</h1>
		<script src="../js/axios.js"></script>
		<script type="text/javascript">
			axios.defaults.baseURL="http://localhost:8080"
			/**
			 * 2.axios的post请求说明
			 * 2.1 什么时候使用post请求 新增操作
			 * 知识点:
			 * 		let user js对象  json串  java对象
			 *  说明: 
			 * 		前端代码传递的JS对象,而后端使用的是java对象,
			 * 		2种对象没有办法直接转化,需要转化JSON进行传递.
			 * 	axios使用post请求时,自动将JS对象解析为JSON串
			 */

			let user={id:100,name:"毛"}
			axios.post("/axios/saveUser",user)
				.then(function(promise){
					console.log(promise.data)
				})
			
		</script>
	</body>
</html>

编辑AxiosController

/**
     * 编辑后端Controller
     * URL: /axios/saveUser
     * 参数: json串
     *      {"id":100,"name":"tomcat猫","age":20}
     * 返回值: User
     * 难点:
     *      1.将JSON串转化为Java对象  @RequestBody
     *      2.将Java对象转化为JSON串! @ResponseBody
     */
    @PostMapping("/saveUser")
    public User saveUser(@RequestBody User user){

        return user;
    }