一、post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax POST请求</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("mybtn").onclick = function(){
// 发送ajax post请求
// 1.创建ajax核心对象
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","/url",true)
// 4.发送请求
// 放到send这个函数小括号中的数据，会自动在请求体当中提交数据
// send()中的内容注意格式 遵循http的协议name=value&name=value。。。
xhr.send("username=zhangsan&password=123")
}
}
</script>
<button id="mybtn">发送ajax POST请求</button>
<div id="mydiv">
</div>
</body>
</html>
二、模拟form表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax POST请求</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("mybtn").onclick = function(){
// 发送ajax post请求
// 1.创建ajax核心对象
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","/url",true)
// 4.发送请求
// 怎么模拟ajax提交form表单？？设置请求头的内容类型，这行代码就是模拟form表单提交过程
// 写个form表单中的entype属性
// 设置请求头的内容类型时，必须在open之后
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
// 放到send这个函数小括号中的数据，会自动在请求体当中提交数据
// 使用js代码获取用户名和密码
var username = document.getElementById("username").vaule
var password = document.getElementById("password").value
// send()中的内容注意格式 遵循http的协议name=value&name=value。。。
xhr.send("username="+username+"&password="+password)
}
}
</script>
用户名：<input type="text" name="" id="username"><br>
密码：<input type="password" name="" id="password"><br>
<button id="mybtn">发送ajax POST请求</button>
<div id="mydiv">
</div>
</body>
</html>
// 后端代码
声明HttpServletRequest request
String username = request.getParameter("username")
String password = request.getParameter("password")