JavaScript请求后台数据的几种常用方式

最新推荐文章于 2024-07-12 09:57:51 发布

梁云亮

最新推荐文章于 2024-07-12 09:57:51 发布

阅读量9.6k

点赞数 6

分类专栏： # TypeScript/JavaScript/JQuery 文章标签： JavaScript请求后台数据自定义AJAX window.local.href window.open() Form.submit()

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/103095814

版权

TypeScript/JavaScript/JQuery 专栏收录该内容

73 篇文章 4 订阅

订阅专栏

0、本博客所用到的服务器端的代码

@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);
    }
}

1、window.location.href

<%@ 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>

2、window.open()

把js中的值传到后台，区别是后台请求后台之后，默认会打开新的浏览器窗口。

<%@ 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>

3、.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>

4、.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.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>

5、自定义AJAX

<%@ 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>