JavaScript请求后台数据的几种常用方式#yyds干货盘点# _javascript

少年意气强不羁，虎胁插翼白日飞。这篇文章主要讲述JavaScript请求后台数据的几种常用方式#yyds干货盘点#相关的知识，希望能为你提供帮助。
0、本博客所用到的服务器端的代码

@WebServlet(urlPatterns = "/demoServlet") public class DemoServlet extends HttpServlet @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException String data = https://www.songbingjia.com/android/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 = https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/$pageContext.request.contextPath/demoServlet?data=https://www.songbingjia.com/android/haha"; < /script> < /head> < body> < button onclick="fun()"> 请求< /button> < /body> < /html>

2、window.open()【JavaScript请求后台数据的几种常用方式#yyds干货盘点#】把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=https://www.songbingjia.com/android/haha"); //打开新的窗口 window.open("$pageContext.request.contextPath/demoServlet?data=https://www.songbingjia.com/android/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=https://www.songbingjia.com/android/haha"; //这种方式不能将数据传递到后台 form.action="$pageContext.request.contextPath/demoServlet"; var input = document.createElement("input"); input.name="data"; input.value= "https://www.songbingjia.com/android/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=https://www.songbingjia.com/android/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请参看博客：< a rel=" nofollow" href=https://www.songbingjia.com/android/" https://blog.csdn.net/lianghecai52171314/article/details/102978309"> JQuery AJAX< /a>