JavaScript请求后台数据的几种常用方式 #yyds干货盘点#
Posted 梁云亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript请求后台数据的几种常用方式 #yyds干货盘点#相关的知识，希望对你有一定的参考价值。
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
请参看博客：<a rel="nofollow" href="https://blog.csdn.net/lianghecai52171314/article/details/102978309">JQuery AJAX</a>
以上是关于JavaScript请求后台数据的几种常用方式 #yyds干货盘点#的主要内容，如果未能解决你的问题，请参考以下文章