原生Ajax与JSON实践二（Post请求）

vlambda
2020-05-04

原生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.url var 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>