當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/3 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 Get和Post请求和对应的参数获取小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.get和post的請(qǐng)求方式

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>vue的異步請(qǐng)求</title><script src="js/vue.js"></script><script src="js/axios-0.18.0.js"></script> </head> <body> <div id="div"><input type="button" value="發(fā)送get請(qǐng)求方式1" @click="doGet1()"><input type="button" value="發(fā)送get請(qǐng)求方式2" @click="doGet2()"><input type="button" value="發(fā)送post請(qǐng)求方式1" @click="doPost1()"><input type="button" value="發(fā)送post請(qǐng)求方式2" @click="doPost2()"> </div> <script>new Vue({el: "#div",data: {user: {username: "rose",password: 123}},methods: {// <input type="button" value="發(fā)送get請(qǐng)求方式1" @click="doGet1()">doGet1() {axios.get("ajaxServlet?username=jack&password=123456").then((resp) => {//resp響應(yīng)對(duì)象,通過resp響應(yīng)對(duì)象可以獲取響應(yīng)結(jié)果console.log(resp);//{data: "ok ,response successful...", status: 200, statusText: "", headers: {…}, config: {…}, …}//通過對(duì)象的屬性data獲取值(響應(yīng)結(jié)果)console.log(resp.data);}).catch((error) => {//信息紅色字體展示console.error(error);})},// <input type="button" value="發(fā)送get請(qǐng)求方式2" @click="doGet2()">doGet2() {//傳參較多時(shí)使用對(duì)象封裝,方便書寫和閱讀axios.get("ajaxServlet", {params: this.user}).then((resp) => {console.log(resp);//獲取響應(yīng)回來的數(shù)據(jù)console.log(resp.data);}).catch((error) => {//信息紅色字體展示console.error(error);})},// <input type="button" value="發(fā)送post請(qǐng)求方式1" @click="doPost1()">doPost1() {axios.post("ajaxServlet", "username=jack&password=123456").then((resp) => {console.log(resp);//獲取響應(yīng)回來的數(shù)據(jù)console.log(resp.data);}).catch((error) => {//信息紅色字體展示console.error(error);})},// <input type="button" value="發(fā)送post請(qǐng)求方式2" @click="doPost2()">doPost2() {//傳參較多時(shí)使用對(duì)象封裝,方便書寫和閱讀,傳入的參數(shù)是json格式,對(duì)應(yīng)的servlet需要用對(duì)應(yīng)的方法axios.post("ajaxServlet", this.user).then((resp) => {console.log(resp);//獲取響應(yīng)回來的數(shù)據(jù)console.log(resp.data);}).catch((error) => {//信息紅色字體展示console.error(error);})}}}); </script> </body> </html>

2.處理doGet1和doGet2以及doPost1

方式1[req請(qǐng)求對(duì)象根據(jù)傳遞的key獲取值]
- request.getParameter(“key”)方式

//1 獲取請(qǐng)求參數(shù)String username = request.getParameter("username");String password = request.getParameter("password");//2 打印請(qǐng)求參數(shù)System.out.println("username = " + username);System.out.println("password = " + password);//3 響應(yīng)結(jié)果response.getWriter().write("ok ,response successful...");打印結(jié)果: ------------------------------------------------------------------------------------ doGet1請(qǐng)求: username = jack password = 123456 界面Response:ok ,response successful...doGet2請(qǐng)求: username = rose password = 123 界面Response:ok ,response successful...doPost1請(qǐng)求: username = jack password = 123456 界面Response:ok ,response successful...

方式2[使用BeanUtils封裝多個(gè)參數(shù)]
/**
- 封裝請(qǐng)求參數(shù)到j(luò)avabean中,請(qǐng)求參數(shù)的格式為name=value&name=value
- @param request 表單中的數(shù)據(jù)
- @param clazz 封裝到哪個(gè)javabean
- @return 封裝好的javabean對(duì)象
- 使用的是泛型。泛型必須先聲明再使用。聲明必須在返回值之前
- T指的就是泛型，它可以是任意字符，只是作為一個(gè)占位符。
- 聲明時(shí)用什么字符，使用時(shí)就得用什么
  */

//1.創(chuàng)建封裝實(shí)例化對(duì)象User user = new User();try {//采用工具類封裝方法BeanUtils.populate(user,request.getParameterMap());//打印請(qǐng)求參數(shù)System.out.println("username = " + user.getUsername());System.out.println("password = " + user.getPassword());} catch (Exception e) {e.printStackTrace();}//3 響應(yīng)結(jié)果response.getWriter().write("ok ,response successful...");打印結(jié)果: ------------------------------------------------------------------------------------ doGet1請(qǐng)求: username = jack password = 123456 界面Response:ok ,response successful...doGet2請(qǐng)求: username = rose password = 123 界面Response:ok ,response successful...doPost1請(qǐng)求: username = jack password = 123456 界面Response:ok ,response successful...

注:BeanUtils.populate無法封裝請(qǐng)求中帶有數(shù)組的參數(shù)

BeanUtils工具類的依賴及**[jar包下載]**

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

3.處理doPost2

方式:使用 JSON轉(zhuǎn)換工具[jackson]

//1 獲取請(qǐng)求參數(shù)ObjectMapper objectMapper=new ObjectMapper();//可以封裝客戶端發(fā)送過來的json數(shù)據(jù)[將json封裝成對(duì)象]User user=objectMapper.readValue(request.getReader(),User.class);//2 打印請(qǐng)求參數(shù)System.out.println(user);//3 響應(yīng)json[將對(duì)象轉(zhuǎn)換為json]objectMapper.writeValue(response.getWriter(),user);打印結(jié)果: ------------------------------------------------------------------------------------ doPost2請(qǐng)求: User{username='rose', password='123'} 界面Response:{"username":"rose","password":"123"}

注:jackson只能解析post請(qǐng)求參數(shù)類型為對(duì)象
jackson相關(guān)依賴或**jar包下載:**

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

4.請(qǐng)求示例

<!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"><div>輸入的姓名是：{{user.username}}</div><div>輸入的年齡是：{{user.age}}</div><div>選擇的性別是：{{user.gender}}</div><div>選擇的愛好是：{{user.hobbies}}</div><hr/><form>姓名：<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><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接管的區(qū)域，在這一片區(qū)域內(nèi)才可以使用vue的語法處理數(shù)據(jù)data:{ //定義變量等數(shù)據(jù)，這些變量的值將來會(huì)在展示到頁面上user:{username:"張益達(dá)",age:20,gender:"man",hobbies:[]}},methods:{ //定義vue中的方法，將來使用vue的事件綁定需要使用這里面定義的方法。sendData(){/*要訪問的路徑：http://localhost:8080/vue_830/userServlet當(dāng)前頁面的路徑：http://localhost:8080/vue_830/v_model.html*///發(fā)送異步GET請(qǐng)求，傳遞參數(shù)//axios.get("./userServlet",{params:this.user}).then(resp=>{}) //對(duì)/*axios.get("userServlet",{params:this.user}).then(resp=>{console.log(resp); //響應(yīng)對(duì)象：包括響應(yīng)結(jié)果和響應(yīng)碼等數(shù)據(jù)console.log(resp.data);})*/axios.post("userServlet",this.user).then(resp=>{console.log(resp); //響應(yīng)對(duì)象：包括響應(yīng)結(jié)果和響應(yīng)碼等數(shù)據(jù)console.log(resp.data);})}}}); </script> </html>

響應(yīng)方式不能采用BeanUtils,因?yàn)閰?shù)中有數(shù)組;顧所以采用JSON,所以請(qǐng)求方式采用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請(qǐng)求接收請(qǐng)求參數(shù)//1 接收請(qǐng)求參數(shù)并封裝/* User user=new User();Map<String, String[]> parameterMap = request.getParameterMap();try {BeanUtils.populate(user,parameterMap); //無法封裝數(shù)組} catch (Exception e) {e.printStackTrace();}*///1 post請(qǐng)求接收請(qǐng)求參數(shù)User user = objectMapper.readValue(request.getReader(), User.class);//2 打印結(jié)果System.out.println(user);//3 響應(yīng)jsonobjectMapper.writeValue(response.getWriter(),user);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);} }打印結(jié)果: ------------------------------------------------------------------------------ User{username='張益達(dá)', age=20, gender='man', hobbies=[1, 2]} 界面Response:{"username":"張益達(dá)","age":20,"gender":"man","hobbies":["1","2"]}

總結(jié)

以上是生活随笔為你收集整理的Get和Post请求和对应的参数获取的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

参数
post

上一篇：英伟达 RTX 50“Blackwell
下一篇：赵毅个人资料赵毅个人介绍