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>");
}

posted @ 2023-07-29 21:32 洛小依ovo 阅读(479) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery--ajax请求

· AJAX--ajax的get请求

· Ajax用户名验证

· Ajax的post使用

· 3_案例开发之验证用户名

公告

昵称：洛小依ovo
园龄： 4年5个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

AJAX--ajax的post请求

一、post请求

二、模拟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.发送请求
	// 放到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>

	// 后端代码
	声明HttpServletRequest request
	String username = request.getParameter("username")
	String password = request.getParameter("password")

	// 后端代码
	声明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>");
	}