增删改查最终总结—1（前端ajax请求+SpringMVC/控制层接收参数最终总结）

好运天天有，向我滚滚来

已于 2022-03-21 00:07:44 修改

阅读量101

点赞数

分类专栏：三阶段项目文章标签： java

于 2022-02-28 15:33:47 首次发布

本文链接：https://blog.csdn.net/fhefhffg/article/details/123183882

版权

三阶段项目专栏收录该内容

17 篇文章 1 订阅

订阅专栏

                        Ajax/Axios的简化写法（以后基本不写promise，都是方式3里的data：result）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios简化测试3</h1>
		<script>
			原版：
			let url1 = "http://localhost:8080/web/hello"	
			let url2 = "http://localhost:8080/web/hello2"
			axios.get(url1)
				 .then(function(promise){
					 elert(promise.data)
				 })
			
			/* 简化方式1: 抽取后端服务器地址 */  =后面是公共的前缀
			axios.defaults.baseURL = "http://localhost:8080"
			axios.get("/web/hello")
				 .then(function(promise){
					 elert(promise.data)
				 })
			axios.get("/web/hello2"
				 .then(function(promise){
					 elert(promise.data)
				 })
			
			/* 简化方式2: 方式1的基础上 箭头函数使用 如果参数只有一个可以省略promise外的括号 */
			axios.get("/web/hello")
			     .then( promise => {
					 alert(promise.data)  
				 })
			
			/* 简化方式3: 在1和2的基础上 async await简化调用 重点——以后经常用到
			   问题描述: 如果ajax如果嵌套的层级较多,则引发"回调地狱"问题
				回调地狱问题：需要我们发送第二个Ajax请求，要求里面的参数是第一个Ajax的结果……
				例：axios.get("/web/hello")//嵌套结构，回调地狱
			    		    .then( promise => {   
					     let result1 = promise.data
						axios.get("url地址"，{params：result1})
			     				.then( promise => {
					 		let result2 = promise.data
							……………………不断嵌套	 
				             })
				          })
			   解决问题: 将axios中的then进行简化.
			   语法:
					1. 使用async关键字标识函数
					2. 通过await标识ajax请求
					3. 必须同时出现
			 */	 
			async function getHello(要传进来的参数){  //要标识函数先 定义函数				
				let promise = await axios.get("/web/hello")
				alert(promise.data)
			}
			//调用函数
			getHello()

			
			那该如何嵌套？？
			async function getHello(){  //要标识函数先 定义函数				
				let promise = await axios.get("/web/hello")	
				此处改为return promise.data
			}———————— 一
			async function getHello2(result1){  //要标识函数先 定义函数				
				let promise = await axios.get("/web/hello")	
				此处改为return promise.data
			}———————— 三
			//调用函数
			let result1 = getHello()定义一个结果的变量，供要嵌套的里面的请求调用————————二
			gethello2（）———————— 四

简化方式3再简化：
			async function getHello(要传进来的参数){  //要标识函数先 定义函数				
				//let promise = await axios.get("/web/hello")
				//alert(promise.data)

				//let {data: result,status: code} = await axios.get("/web/hello")
				//alert(result)
				//alert(code)             通过对象 选择自己想接收的数据接收即可，可以全接，也可以不全接
				let {data: result} = await axios.get("/web/hello")
				alert(result)

			}
			//调用函数
			getHello()		
		</script>
	</body>
</html>



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
@CrossOrigin    //标识跨域的
@RequestMapping("/web")
public class WebController {

    /**
     * URL: http://localhost:8080/web/hello
     * 类型: get
     * 返回值: String
     */
    @GetMapping("/hello")
    public String hello(){
        return "好好学习,天天向上";
    }
}