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

最新推荐文章于 2023-07-09 02:23:13 发布

陪雨岁岁年年

最新推荐文章于 2023-07-09 02:23:13 发布

阅读量1.1k

点赞数 1

文章标签： java vue.js node.js

本文链接：https://blog.csdn.net/m0_47649585/article/details/120011817

版权

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 {
    @Override
    protected 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 响应json
        objectMapper.writeValue(response.getWriter(),user);

    }

    @Override
    protected 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"]}

陪雨岁岁年年

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Get和Post请求和对应的参数获取

1.get和post的请求方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue的异步请求</title> <script src="js/vue.js"></script>  <script src="js/axios-0.
复制链接

扫一扫