纯html通过XMLHttpRequest访问java后端接口并将返回结果输出到控制台【建议收藏】

发布时间：2024年01月12日

我们需要准备几个部分：

1、后端接口【servlet+tomcat】

2、前端页面代码

3、js发起请求部分

后端接口：

@WebServlet("/h1")
public class HController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置响应格式，一般我们采用json格式
        resp.setContentType("application/json");
        //设置响应的字符集
        resp.setCharacterEncoding("UTF-8");
        //后端解决跨域的问题【非常重要，没有这个就访问不了】
        resp.setHeader("Access-Control-Allow-Origin", "*");

        //创建一个json字符串
        String str = "{\"name\":\"xjx\",\"age\":19}";
        //通过响应对象进行响应
        PrintWriter out = resp.getWriter();
        out.print(str);
        out.flush();
    }
}

前端+js代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过css控制布局和样式 -->
    <style>
        #app{text-align: center;}
        button{    
            background-color: #36D;
            color: #fff;
            border: 4px #36D solid;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <!-- html控制页面元素 -->
    <div id="app">
        <button onclick="SendXMLHttpRequest()">点我访问</button>
    </div>
</body>
</html>
<script>
    //创建一个方法
    function SendXMLHttpRequest(){
        //创建XMLHttpRequest对象，该对象用于与服务器交互，可以请求特定的URL，获取数据。
        var xhr = new XMLHttpRequest();
        //初始化一个请求，第三个参数默认是true，表示是否是异步操作
        xhr.open("GET", "http://localhost:8080/h1", true);
        //当 readyState 属性发生变化时，调用的事件处理器。【回调函数】
        xhr.onreadystatechange = function(a) {
            //如果返回对象中的状态满足就将返回的数据取出来打印到控制台
            if (xhr.readyState === 4&&xhr.status===200 ) {
                //转换成json格式
                var response = JSON.parse(xhr.responseText);                
                console.log(response);
            }
        };
        //发送请求
        xhr.send();
    }
</script>

运行效果：

到这里，就用原生的js发起请求，在这里面需要注意的就是跨域问题，我采用的是在后端解决。

文章来源:https://blog.csdn.net/qq_52545155/article/details/135544552
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章