AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交

关于AJAX发送POST请求，首先演示一个小案例。

当输入用户名：张三，密码：123。点击发送请求按钮

这是用post请求模拟的表单提交。接下来看一下如何用AJAX发送POST请求

后端代码：

@WebServlet("/ajaxServlet03")
public class ajaxServlet03 extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text./html;charset=utf-8");PrintWriter out = response.getWriter();String username = request.getParameter("username");String userpwd = request.getParameter("userpwd");out.print("用户名:"+username+",密码:"+userpwd);}
}

前端代码（每一步都做了详细笔记）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>发送ajax post请求</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body><script type="text/javascript">window.onload = function () {document.getElementById("mybtn").onclick = function () {//1.创建XMLHttpRequest对象var xhr = new XMLHttpRequest();//2.注册回调函数xhr.onreadystatechange = function () {if (this.readyState == 4){if (this.status == 200) {document.getElementById("mydiv").innerHTML = this.responseText}else {alert(this.status)}}}//3.开启通道xhr.open("POST","/AjaxDemo/ajaxServlet03",true)//4.发送请求//怎么模拟AJAX提交from表单呢？    设置请求头的内容类型//设置请求头的内容类型时，必须在open前，send之后。xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")//不设置就不会发送请求到servlet//放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据//使用JS代码获取用户输入的用户名和密码var username = document.getElementById("username").value;var userpwd = document.getElementById("userpwd").value;//放在send()中的数据，也要注意格式，及key=value&key=valuexhr.send("username="+username+"&userpwd="+userpwd)}}
</script>
用户名:<input type="text" id="username"><br>
密码：<input type="text" id="userpwd"><br>
<button id="mybtn">发送ajax POST请求</button>
<div id="mydiv"></div>
</body>
</html>

注意：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

这段代码会用来设置请求头的内容类型的，及用于模拟from表单。

但是这段代码必须放在开启通道后，发送请求前。（即，open前和send后）

AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。

// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)

AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交相关推荐

ajax 模拟表单提交,Ajax模拟Form表单提交，含多种数据上传
---恢复内容开始--- Ajax提交表单.使用FormData提交表单数据和上传的文件(这里的后台使用C#获取,你可以使用Java一样获取) 有时候前台的数据提交到后台,不想使用form表单上传,希 ...
AJAX学习笔记（基本使用，请求参数传递，获取服务端响应，错误处理，低版本IE浏览器缓存问题及解决）
1. Ajax实现步骤创建ajax对象 let xhr = new XMLHttpRequest(); 告诉ajax请求地址及请求方式 xhr.open('get','http://www.exam ...
Gin 框架学习笔记（01）— 自定义结构体绑定表单、绑定URI、自定义log、自定义中间件、路由组、解析查询字符串、上传文件、使用HTTP方法
要实现一个 API 服务器,首先要考虑两个方面:API 风格和媒体类型.Go 语言中常用的 API 风格是 RPC 和 REST,常用的媒体类型是 JSON.XML 和 Protobuf.在 Go A ...
跨域请求之JSP中模拟post表单提交
一.使用场景当我们需要跨域进行登录时,为了避免登录信息暴露在链接中,此时必须采用Post提交.同时Ajax是不支持跨域的.此时就可以采用在Jsp中模拟Post提交. 二.代码实现以下实例是跨域登录 ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
SpringBoot防止重复请求，重复表单提交超级简单的注解实现
1. 注解接口 /** * @description 防止表单重复提交注解 */ @Retention(RetentionPolicy.RUNTIME) @Target(ElementType.MET ...
AJAX 学习笔记[四] AJAX 对服务器返回的XML 的处理
在AJAX 中,服务器端如果返回的XML 文档,则可以通过异步对象的responseXML 属性来获取器XML 数据.而开发者可以利用DOM 的相关方法对其进行处理. 假设服务器返回的XML 文档,如 ...
java httpclient form_Java后台使用httpclient入门HttpPost请求（form表单提交，File文件上传和传输Json数据）...
public classHttpClientUtils {private final static Logger logger = Logger.getLogger(HttpClientUtils.c ...
form 表单提交时用ajax异步请求导致ajax请求结果无法接收问题
1.背景描述,有个公司内部用的小系统,不想大动干戈用太多前端框架,就用HTML5写了个登陆页面,刚开始想着用form表单提交登陆账户信息.后来因为前后端分离,并且统一用ajax调用后台服务交互数据,因 ...

AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交

AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。

AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交相关推荐

最新文章

热门文章