url1: http://localhost:8080/findUsername=tomcat&age=18
url2: http://localhost:8080/findUsername=tomcat&age=18&sex=男
需求: 上述的参数传递是否可以简化!
简化写法:
url3: http://localhost:8080/findUser/tomcat/18/男
案例: url3: http://localhost:8080/findUser/tomcat/18/男 (发送)
要求:
1. restFul的风格数据的位置一旦确定,不能修改.
2. 参数与参数之间使用"/"的方式分割.
3. restFul的风格适用于 get/post/put/delete 请求类型
请求类型种类: get/post/put/delete
/** * URL地址: * http://localhost:8080/findUser/tomcat/18/男 get类型 * 参数: name/age/sex * 返回值: 返回值获取的数据 * restFul语法: * 1. 参数与参数之间使用/分割 * 2. 需要接收的参数使用{}包裹 * 3. 参数接收时采用@PathVariable取值 */ @RequestMapping("/findUser/{name}/{age}/{sex}") public String findUser(@PathVariable String name, @PathVariable int age, @PathVariable String sex){ return name+":"+age+":"+sex; }
**JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。**它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。它是基于 JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON采用完全独立于程序语言的文本格式,但是也使用了类C语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。这些特性使JSON成为理想的数据交换语言。
对象(object) 是一个无序的“‘名称/值’对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间使用“,”(逗号)分隔。`
例子: 其中的’'号key可写可不写
{"id": "100","name": "tomcat", "age": "18"}
数组(array) 是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间使用“,”(逗号)分隔。
[100,"张三",true]
值(value) 可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。这些结构可以嵌套。
[100,true,["a","b",{"name":"张三","hobbys": ["吃饭","睡觉"]}]]
问题说明1: 前端访问后端服务器,一般采用Ajax方式进行数据传递. 后端服务器返回给前端页面 通常采用JSON格式数据
问题说明2: 后端服务器怎么接收前端的参数的. servlet机制
问题: 后端服务器如何返回JSON串
需求: 根据name/age 查询用户,要求返回User对象的JSON串
URL: http://localhost:8080/findJSONname=tomcat&age=18
/** * URL: http://localhost:8080/findJSON?name=tomcat&age=18 get * 参数: name=tomcat&age=18 * 返回值: User对象的JSON * 知识点: * 1.@ResponseBody //将返回值转化为JSON串 使用最多!!! * 2.如果返回String类型,则@ResponseBody将字符串本身返回给前端. */ @RequestMapping("/findJSON") @ResponseBody //将返回值转化为JSON串 public User findJSON(User user){ //在业务层扩展数据 user.setId(101); user.setSex("男"); return user; }
package com.jt.controller; import com.jt.pojo.User; import org.springframework.stereotype.Component; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; //@Controller //将类交给SpringMVC管理 //@ResponseBody //当前类中的所有方法 都返回JSON串 @RestController // = @Controller + @ResponseBody @RequestMapping("/rest") public class RestUserController { /** * 注意事项: * 1.springMVC中的请求路径不能重复!!!! * 2.可以@RequestMapping("/业务名称")自定义前缀 * @return */ @RequestMapping("/findJSON") public User findUser(User user){ user.setId(105); user.setSex("男"); return user; } }
Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。 [3]
功能和作用: Ajax主要实现前后端交互.提高用户页面与服务器之间交互效率.
特点: 局部刷新,异步访问
组成部分:
1. 用户
2. Ajax引擎–代理
3. 服务器
异步的特点:
1. 由Ajax引擎直接访问后端服务器。
2. 在回调函数没有执行之前,用户可以执行自己的任务。 异步
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Axios测试</title> <script src="../js/axios.js"></script> </head> <body> <h1>Axios测试案例-1</h1> <script> /* 1.可以编辑Axios 发送ajax请求 2.不同的服务器之间发送ajax请求时会有"跨域"问题 3.解决跨域问题 通过注解搞定. @CrossOrigin */ var url = "http://localhost:8080/hello" axios.get(url) .then(function(result){ //回调函数!!! console.log(result) }) </script> </body> </html>
需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByIdid=100
参数: id = 100
返回值: User对象的JSON 伪造一个User对象
package com.jt.controller; import com.jt.pojo.User; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @CrossOrigin //主要解决跨域问题 @RequestMapping("/axios") public class AxiosController { /** * URL地址: http://localhost:8080/axios/getUserById?id=100 * 参数: id = 100 * 返回值: User对象的JSON 伪造一个User对象 */ @RequestMapping("/getUserById") public User getUserById(Integer id){ //根据ID查询数据库 User user = new User(); user.setId(id); user.setName("好好学习"); user.setAge(1000); user.setSex("男"); return user; } }
/** * var 关键字 没有作用域的概念!!!! * let 相当于var 有作用域 更加安全. * const 定义常量的 * 关于axios数据返回值对象的说明: * axios为了接收后端服务器数据,利用promise对象 * 封装参数 */ let url1 = "http://localhost:8080/axios/getUserById?id=100" axios.get(url1) .then(function(promise){ console.log(promise.data) })
需求: 根据ID查询用户信息
URL地址: http://localhost:8080/axios/getUserByNAid=xxx&name=xxxx
参数: id=xxx name=xxx
返回值: List [user1,user2]
/** * URL地址: http://localhost:8080/axios/getUserByNA?id=xxx&name=xxxx * 参数: id=xxx name=xxx * 返回值: List [user1,user2] */ @RequestMapping("/getUserByNA") public List<User> getUserByNA(User user){ List<User> list = new ArrayList<>(); list.add(user);//简化赋值操作 直接返回 list.add(user); return list; }
/** * 1.get请求 对象传参 * 2.语法说明: * 关键字: params : 对象信息 */ let user2 = {name:"tomcat",age:100} let url2 = "http://localhost:8080/axios/getUserByNA" axios.get(url2,{params:user2}) .then(function(promise){ console.log(promise.data) })
1.页面URL地址
2. 页面打印信息
查询name=tomcat sex=“男” 的用户 要求请求采用restFul的风格实现数据获取.
URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男
参数: name/sex
返回值: List
/** * URL地址: http://localhost:8080/axios/findUserByNS/tomcat/男 * 参数: name/sex * 返回值: List<User> */ @RequestMapping("/findUserByNS/{name}/{sex}") //调用set方法为属性赋值 public List<User> findUserByNS(User user){ List<User> list = new ArrayList<>(); list.add(user); list.add(user); return list; }
/** * 需求: 利用restFul的风格实现前后端交互. * URL: http://localhost:8080/axios/findUserByNS/tomcat/男 * 难点: * 1.tomcat/男直接写死在url地址中. 后期扩展不方便 * 模版字符串写法:ES6引入的新功能 * 语法: * 1. 使用反引号 `` * 2. 作用: 1.可以保证字符串的格式 * 2.可以动态获取变量的值 */ let user3 = {name: "tomcat", sex: "男"} let url3 = `http://localhost:8080/axios/findUserByNS/${user3.name}/${user3.sex}` let html = `<div> <p>AAA</p> <p>BBB</p> </div> ` axios.get(url3) .then(function(promise){ console.log(promise.data) })
1.页面URL地址
2. 页面数据显示