原生Ajax与JSON实践二（Post请求）
Posted 和菜狗博士一起搞大数据
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生Ajax与JSON实践二（Post请求）相关的知识，希望对你有一定的参考价值。
为了方便看便将POST和GET分为两部分。在本文中，将对POST请求进行介绍。与GET请求相比POST请求的最大不同是URL中无参数，并且需要进行一些请求方法的声明。该请求所对应的Servlet仍然是上一篇文章中的Servlet （原生Ajax与JSON实践一）。
代码如下：
index2.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>项目登录2</title><script type="text/javascript">//js的登录方法function login(){//使用Ajax向servlet发送post请求//1.获取表单的数据var username = document.getElementById("username").value;var password = document.getElementById("password").value;//2.拼接表单数据var params = "username="+username+"&password="+password;console.log(params);//3.urlvar url = "${pageContext.request.contextPath}/loginServlet";console.log(url);//4.使用Ajax发送post请求//4.1创建一个请求对象var request = new XMLHttpRequest();//4.2调用post请求的方法request.open("post",url,true);//使用get请求，true表示异步请求// 设置post请求头request.setRequestHeader("content-type","application/x-www-form-urlencoded");request.send(params);request.onreadystatechange = function () {console.log("准备状态码-"+request.readyState+"：响应状态码"+request.status)if(request.readyState==4 &&request.status==200){var rspText = request.responseText;console.log(rspText)//获取span标签var tipTag = document.getElementById("tip")if(rspText=="success"){tipTag.innerHTML = "登录成功"}else{tipTag.innerHTML = "登录失败"}}}}</script></head><body><p>非异步请求</p><%-- 非异步请求 --%><form action="${pageContext.request.contextPath}/loginServlet"><input type="text" name="username"><br><input type="password" name="password"><br><input type="submit" value="登录"><br></form><p>------------------------------------------------</p><%--异步请求 GET--%><p>异步请求</p><form><input type="text" name="username" id="username"><br><input type="password" name="password" id="password"><br><input type="button" value="登录" onclick="login()"><br></form><span style="color: red" id = "tip"> </span></body></html>
需要注意的是需要声明一个请求头：
request.setRequestHeader("content-type","application/x-www-form-urlencoded");
以上是关于原生Ajax与JSON实践二（Post请求）的主要内容，如果未能解决你的问题，请参考以下文章
Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）
Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）
Ajax入门笔记（原生AjaxjQueryaxiosfetch跨域SONPCORS）