AJAX--ajax的post请求
一、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表单提交
关键代码就在于：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")设置请求头的内容，模拟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")三、案例---判断用户名是否可用
- 前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证用户名是否可用</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("username").onfocus = function(){
// 失去焦点后清空span标记
document.getElementById("tipMsg").innerHTML = ""
}
document.getElementById("username").onblur = function(){
// 发送 ajax post请求
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(this.readyState == 4){
if(this.status == 200){
document.getElementById("tipMsg").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
xhr.open("POST","/url",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
// 获取表单数据
var username = document.getElementById("username")
xhr.send("username="+username)
}
}
</script>
用户名：<input type="text" name="" id="username">
<span id="tipMsg"></span>
</body>
</html>- 后端代码
// 后端代码
声明HttpServletRequest request
// 获取用户名
String username = request.getParameter("username");
// 连接数据库
// 查询结果
声明HttpServletResponse response
// 响应到浏览器
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if(flag){
out.print("<font>对不起用户名已存在</font>");
}else{
out.print("<font>用户名可以使用</font>");
}
浙公网安备 33010602011771号