Get和Post请求和对应的参数获取

1.get和post的请求方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue的异步请求</title><script src="js/vue.js"></script><!--vue单独抽取的插件--><script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div"><input type="button" value="发送get请求方式1" @click="doGet1()"><input type="button" value="发送get请求方式2" @click="doGet2()"><input type="button" value="发送post请求方式1" @click="doPost1()"><input type="button" value="发送post请求方式2" @click="doPost2()">
</div>
<script>new Vue({el: "#div",data: {user: {username: "rose",password: 123}},methods: {// <input type="button" value="发送get请求方式1" @click="doGet1()">doGet1() {axios.get("ajaxServlet?username=jack&password=123456").then((resp) => {//resp响应对象,通过resp响应对象可以获取响应结果console.log(resp);//{data: "ok ,response successful...", status: 200, statusText: "", headers: {…}, config: {…}, …}//通过对象的属性data获取值(响应结果)console.log(resp.data);}).catch((error) => {//信息红色字体展示console.error(error);})},// <input type="button" value="发送get请求方式2" @click="doGet2()">doGet2() {//传参较多时使用对象封装,方便书写和阅读axios.get("ajaxServlet", {params: this.user}).then((resp) => {console.log(resp);//获取响应回来的数据console.log(resp.data);}).catch((error) => {//信息红色字体展示console.error(error);})},// <input type="button" value="发送post请求方式1" @click="doPost1()">doPost1() {axios.post("ajaxServlet", "username=jack&password=123456").then((resp) => {console.log(resp);//获取响应回来的数据console.log(resp.data);}).catch((error) => {//信息红色字体展示console.error(error);})},// <input type="button" value="发送post请求方式2" @click="doPost2()">doPost2() {//传参较多时使用对象封装,方便书写和阅读,传入的参数是json格式,对应的servlet需要用对应的方法axios.post("ajaxServlet", this.user).then((resp) => {console.log(resp);//获取响应回来的数据console.log(resp.data);}).catch((error) => {//信息红色字体展示console.error(error);})}}});
</script>
</body>
</html>

2.处理doGet1和doGet2以及doPost1

方式1[req请求对象根据传递的key获取值]
- request.getParameter(“key”)方式

 //1 获取请求参数String username = request.getParameter("username");String password = request.getParameter("password");//2 打印请求参数System.out.println("username = " + username);System.out.println("password = " + password);//3 响应结果response.getWriter().write("ok ,response successful...");打印结果:
------------------------------------------------------------------------------------
doGet1请求:
username = jack
password = 123456
界面Response:ok ,response successful...doGet2请求:
username = rose
password = 123
界面Response:ok ,response successful...doPost1请求:
username = jack
password = 123456
界面Response:ok ,response successful...

方式2[使用BeanUtils封装多个参数]
/**
- 封装请求参数到javabean中,请求参数的格式为name=value&name=value
- @param request 表单中的数据
- @param clazz 封装到哪个javabean
- @return 封装好的javabean对象
- 使用的是泛型。泛型必须先声明再使用。声明必须在返回值之前
- T指的就是泛型，它可以是任意字符，只是作为一个占位符。
- 声明时用什么字符，使用时就得用什么
  */

//1.创建封装实例化对象User user = new User();try {//采用工具类封装方法BeanUtils.populate(user,request.getParameterMap());//打印请求参数System.out.println("username = " + user.getUsername());System.out.println("password = " + user.getPassword());} catch (Exception e) {e.printStackTrace();}//3 响应结果response.getWriter().write("ok ,response successful...");打印结果:
------------------------------------------------------------------------------------
doGet1请求:
username = jack
password = 123456
界面Response:ok ,response successful...doGet2请求:
username = rose
password = 123
界面Response:ok ,response successful...doPost1请求:
username = jack
password = 123456
界面Response:ok ,response successful...

注:BeanUtils.populate无法封装请求中带有数组的参数

BeanUtils工具类的依赖及**[jar包下载]**

<!--beanutils--><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</artifactId><version>1.9.4</version></dependency>

3.处理doPost2

方式:使用 JSON转换工具[jackson]

        //1 获取请求参数ObjectMapper objectMapper=new ObjectMapper();//可以封装客户端发送过来的json数据[将json封装成对象]User user=objectMapper.readValue(request.getReader(),User.class);//2 打印请求参数System.out.println(user);//3 响应json[将对象转换为json]objectMapper.writeValue(response.getWriter(),user);打印结果:
------------------------------------------------------------------------------------
doPost2请求:
User{username='rose', password='123'}
界面Response:{"username":"rose","password":"123"}

注:jackson只能解析post请求参数类型为对象
jackson相关依赖或**jar包下载:**

<!--jackson--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.8</version></dependency>

4.请求示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单绑定</title></head>
<body><div id="div"><!--需求2：展示填写或者选中的内容--><div>输入的姓名是：{{user.username}}</div><div>输入的年龄是：{{user.age}}</div><div>选择的性别是：{{user.gender}}</div><div>选择的爱好是：{{user.hobbies}}</div><hr/><form><!--需求1：将表单和vue进行双向数据绑定-->姓名：<input type="text" name="username" v-model="user.username"><br>年龄：<input type="number" name="age" v-model="user.age"><br>性别：<input type="radio" name="gender" v-model="user.gender" value="man">男<input type="radio" name="gender" v-model="user.gender" value="woman">女<br>爱好：<input type="checkbox" name="hobbies" v-model="user.hobbies" value="1">唱<input type="checkbox" name="hobbies" v-model="user.hobbies" value="2">跳<input type="checkbox" name="hobbies" v-model="user.hobbies" value="3">rap<input type="checkbox" name="hobbies" v-model="user.hobbies" value="4">篮球<br><!--需求3：点击按钮，通过ajax把表单数据发送给服务器--><!--<input type="button" value="提交信息" v-on:click="sendData()">--><input type="button" value="提交信息" @click="sendData()"></form></div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>new Vue({el:"#div", //表示vue接管的区域，在这一片区域内才可以使用vue的语法处理数据data:{  //定义变量等数据，这些变量的值将来会在展示到页面上user:{username:"张益达",age:20,gender:"man",hobbies:[]}},methods:{  //定义vue中的方法，将来使用vue的事件绑定需要使用这里面定义的方法。sendData(){/*要访问的路径：http://localhost:8080/vue_830/userServlet当前页面的路径：http://localhost:8080/vue_830/v_model.html*///发送异步GET请求，传递参数//axios.get("./userServlet",{params:this.user}).then(resp=>{})  //对/*axios.get("userServlet",{params:this.user}).then(resp=>{console.log(resp);  //响应对象：包括响应结果和响应码等数据console.log(resp.data);})*/axios.post("userServlet",this.user).then(resp=>{console.log(resp);  //响应对象：包括响应结果和响应码等数据console.log(resp.data);})}}});
</script>
</html>

响应方式不能采用BeanUtils,因为参数中有数组;顾所以采用JSON,所以请求方式采用post

Servlet代码:

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {ObjectMapper objectMapper=new ObjectMapper();request.setCharacterEncoding("utf-8");response.setContentType("application/json;charset=utf-8");//get请求接收请求参数//1 接收请求参数并封装/* User user=new User();Map<String, String[]> parameterMap = request.getParameterMap();try {BeanUtils.populate(user,parameterMap);  //无法封装数组} catch (Exception e) {e.printStackTrace();}*///1 post请求接收请求参数User user = objectMapper.readValue(request.getReader(), User.class);//2 打印结果System.out.println(user);//3 响应jsonobjectMapper.writeValue(response.getWriter(),user);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}打印结果:
------------------------------------------------------------------------------
User{username='张益达', age=20, gender='man', hobbies=[1, 2]}
界面Response:{"username":"张益达","age":20,"gender":"man","hobbies":["1","2"]}