Ajax axios get和post请求

最新推荐文章于 2025-08-21 21:29:08 发布

卋舉

最新推荐文章于 2025-08-21 21:29:08 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120974135

ajax 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用Axios库在JavaScript中进行GET和POST请求。对于GET请求，参数通常通过params对象传递；而对于POST请求，可以直接在请求体中指定数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios.get传值使用params:{}
axios.post传值,直接写

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>axios get post </title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <script src="https://unpkg.com/axios"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container" style="margin: 25px">
<button class="btn btn-primary btn-sm">axios - get</button>
<button class="btn btn-info btn-sm">axios-post</button>
<button class="btn btn-info btn-sm">axios-post</button>
    <hr>
</div>
<script>
    let btns = document.querySelectorAll("button");
    btns[0].onclick=function (){
        //alert(this.innerHTML); get()传值
        axios.get("/get",{
            //axios 传值 params:{}
            params:{
                id:100,
                name:"徐龙象"
            }
        })
        .then(res=>{alert(res.data)})
        .catch(err=>console.warn(err))
    }

    btns[1].onclick=function (){
        axios.post("/get",{id:1,name:"徐渭熊"})
        .then(res=>{alert(res.data)})
        .catch(err=>console.warn(err))
    }
    btns[2].onclick=function (){
        axios.delete("/get",{params:{id:2}})
        .then(res=>{alert(res.data)})
        .catch(err=>console.warn(err))
    }
</script>
</body>
</html>

package ws.wsj.servlet;

import com.alibaba.fastjson.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.util.Map;
import java.util.stream.Collectors;

/**
 * @author 卋舉
 * @ProjectName IntelliJ IDEA
 * @ClassName ServletGet
 * @description: TODO
 * @date 2021/10/21 8:45
 */
//axios get,post 请求方法
@WebServlet("/get")
public class ServletGet extends HttpServlet {
    @Override
    //service(get, post请求都可以接收)
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // req 接值的时候设置的字符集
        req.setCharacterEncoding("utf-8");

        // resp 返回值的时候,设置的字符集
        resp.setCharacterEncoding("utf-8");
        //响应字符串,axios res.data 可以取到; 给ajax返回值
        resp.getWriter().print("hello 徐凤年");

        //接值 axios.get() 方式 params:{id:100,name:"徐龙象"}
        System.out.println(req.getParameter("id"));
        System.out.println(req.getParameter("name"));

        // 接值 axios.post()
        //输出的结果 {"id":1,"name":"徐渭熊"}
        //System.out.println(getRequestPayload(req));
        //输出的结果:1 徐渭熊
        /*String json = getRequestPayload(req);
        Map<String,Object> map = JSONObject.parseObject(json, Map.class);
        System.out.println(map.get("id"));
        System.out.println(map.get("name"));*/
        //集合,汇整 collect
        String json = req.getReader().lines().collect(Collectors.joining());
        System.out.println(json);
        Map<String,Object> map = JSONObject.parseObject(json,Map.class);
        System.out.println(map.get("id"));
        System.out.println(map.get("name"));
    }


    /*private String getRequestPayload(HttpServletRequest req){
        StringBuilder sb = new StringBuilder();
        try(BufferedReader reader = req.getReader();){
            char[] buff = new char[1024];
            int len;
            while ((len= reader.read(buff))!=-1){
                sb.append(buff,0,len);
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        return sb.toString();
    }*/
}