当前位置：首页 > 全部内容 > JavaScript 调用后端接口的五种常见方式解析

JavaScript 调用后端接口的五种常见方式解析

作者：服务小站时间：2026-10-30 19:56:13浏览：110

本文汇总了JavaScript与后端交互的五种常用方式，包括通过window.location.href直接跳转、使用window.open打开新窗口、利用submit()方法提交表单、自定义AJAX异步请求以及调用jQuery封装的AJAX接口。文章结合Servlet示例，详细解析了各方法的代码实现与适用场景，帮助开发者根据实际需求选择合适的数据交互方案。

首先，我们需要准备一个基础的服务器端代码作为示例，用于接收前端发送的请求并返回数据。

@WebServlet(urlPatterns = "/demoServlet")
public class DemoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String data = request.getParameter("data");
        response.getWriter().write("{'data':'"+data+"'}");
        System.out.println("doPost："+data);
    }
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String data = request.getParameter("data");
        response.getWriter().write("{'data':'"+data+"'}");
        System.out.println("doGet："+data);
    }
}

第一种方法是直接修改浏览器地址栏，即使用 。这种方式会触发浏览器的导航行为，导致页面刷新或跳转。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript请求后台</title>
        <script type="text/javascript">
            function fun() {
                window.location.href="${pageContext.request.contextPath}/demoServlet?data=haha";
            }
        </script>
    </head>
    <body>
        <button onclick="fun()">请求</button>
    </body>
</html>

第二种方法是通过 函数发起请求。与直接修改地址栏不同，这种方法默认会在浏览器中打开一个新的标签页或窗口来加载目标URL。

需要注意的是，使用 发起请求时，后端接收到请求后，浏览器会默认打开一个新的窗口来展示结果，这可能会影响用户体验，需根据场景谨慎使用。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript请求后台</title>
        <script type="text/javascript">
            function fun() {
                // window.open("${pageContext.request.contextPath}/demoServlet?data=haha"); //打开新的窗口
                window.open("${pageContext.request.contextPath}/demoServlet?data=haha","_self"); //在原窗口中撕开
            }
        </script>
    </head>
    <body>
        <button onclick="fun()">请求</button>
    </body>
</html>

第三种方法是利用表单的 方法动态提交。通过JavaScript获取表单元素，设置其 action 和 method 属性，然后调用 submit() 方法触发提交动作。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript请求后台</title>
        <script type="text/javascript">
            function fun() {
                var form = document.forms["form1"];
                form.action="${pageContext.request.contextPath}/demoServlet";
                form.method="GET";
                form.submit();
            }
        </script>
    </head>
    <body>
        <form name="form1">
            <input type="text" name="data">
        </form>
        <button onclick="fun()">请求</button>
    </body>
</html>

具体实现时，可以在JS中获取表单对象，动态指定提交地址和请求方式（如GET或POST），最后调用 方法完成表单提交，这种方式模拟了用户点击提交按钮的行为。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript请求后台</title>
        <script type="text/javascript">
            function fun() {
               var form = document.createElement("form");
               //form.action="${pageContext.request.contextPath}/demoServlet?data=haha"; //这种方式不能将数据传递到后台
               form.action="${pageContext.request.contextPath}/demoServlet";
               var input = document.createElement("input");
               input.name="data";
               input.value= "haha";
               form.appendChild(input);
               form.method="GET";
               document.body.appendChild(form);
               form.submit();
            }
        </script>
    </head>
    <body>
        <button onclick="fun()">请求</button>
    </body>
</html>

第四种方法是使用原生的 进行异步请求。这是目前Web开发中最常用的方式，它允许在不刷新页面的情况下与服务器交换数据，提升了交互体验。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript请求后台</title>
        <script type="text/javascript">
            function fun() {
                var xhr;
                if (window.XMLHttpRequest) {
                    xhr = new window.XMLHttpRequest;
                } else {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.onreadystatechange = success;
                var url="${pageContext.request.contextPath}/demoServlet?data=haha";
                xhr.open("POST", url, false);
                xhr.send();
                function success() {
                    if (xhr.readyState == 4 && xhr.status == 200) { //回传成功
                        console.info(xhr.responseText);
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        </script>
    </head>
    <body>
        <button onclick="fun()">请求</button>
    </body>
</html>

6、使用JQuery

关于jQuery AJAX的具体用法，建议参考相关技术博客或官方文档，了解其丰富的配置选项和回调处理机制。

至此，我们介绍了JavaScript请求后台数据的几种常用方式。如需了解更多相关内容，可搜索本站过往文章或继续阅读后续章节。感谢大家的支持！

作者最新文章

Java和JavaScript应用场景对比：企业级后端 vs Web前端与Node.js

2026-11-04 16:42:01

JavaScript模块化开发入门：CommonJS与ES Module的区别

2026-11-03 23:31:34

怎么创建并运行第一个js文件

2026-11-03 21:49:02

JavaScript运行环境怎么搭建？Node.js官方下载与安装教程

2026-11-03 20:03:04

NestJS 集成 TypeORM 或 Prisma 实现数据库持久化操作

2026-11-03 18:56:13