JavaScript请求后台数据的常用方法汇总

更新时间：2023年08月09日 17:21:27 作者：梁云亮

这篇文章主要介绍了JavaScript请求后台数据的几种常用方式,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

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>

6、使用JQuery

请参看博客：JQuery AJAX

到此这篇关于JavaScript请求后台数据的几种常用方式的文章就介绍到这了,更多相关js请求后台数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

原生js+canvas实现验证码
这篇文章主要为大家详细介绍了原生js+canvas实现验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
一文教你用JavaScript制作个简单的大转盘游戏
日常生活中，我们经常会见到形形色色的抽奖活动，例如九宫格、大转盘等等……本文就来教大家如何利用JavaScript制作个简单的大转盘游戏，感兴趣的可以了解一下
2023-02-02
详解js静态资源文件请求的处理
这篇文章主要为大家详细介绍了js静态资源文件请求的处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
Javascript实现数组中的元素上下移动
这篇文章主要给大家介绍了Javascript实现数组中的元素上下移动的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-04-04
js中递归函数的使用介绍
所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意，处理不当就会进入死循环。递归函数只有在特定的情况下使用，比如阶乘问题
2012-10-10
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
最近在做项目的时候，需要把后台返回的时间转换成几秒前、几分钟前、几小时前、几天前等的格式，接下来通过本文给大家分享JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式 ,需要的朋友可以参考下
2019-07-07
使用 JavaScript 在没有插件的情况下输入文本掩码的示例详解
这篇文章主要介绍了使用 JavaScript 在没有插件的情况下输入文本掩码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
JavaScript arguments.callee作用及替换方案详解
这篇文章主要介绍了JavaScript arguments.callee作用及替换方案详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
用JS写了一个30分钟倒计时器的实现示例
本文主要介绍了用JS写了一个30分钟倒计时器的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
IE事件对象（The Internet Explorer Event Object）
不同于DOM事件对象，基于Event Handler授权这种方式，IE事件对象可以用不同的方式进行访问。当一个事件Handler通过DOM 0 级的方式被授权，则这个事件对象将作为window对象的属性而存在
2012-06-06