<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function f() {
var xmlHttpRequest = new XMLHttpRequest();
var username = document.getElementById("username").value;
var checkUser = document.getElementById("checkUser");
xmlHttpRequest.open("get", "ajax?username=" + username, true);
xmlHttpRequest.send()
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
if (xmlHttpRequest.responseText=="ok") {
checkUser.innerText = "该用户名可以用"
} else {
checkUser.innerText = "该用户名已被占用"
}
}
}
}
$(function () {
$("#btn").click(function () {
$.ajax(
{
url: "/helloAjax/ajax",
type: "get",
data: {
username: $("#username").val()
},
success: function (data,status,xhr) {
alert(data)
alert(status)
alert(xhr)
}
}
)
})
})
</script>
</head>
<body>
用户:<input type="text" id="username">
<input type="button" id="btn" value="检查">
<div id="checkUser"></div>
<br/>
密码:<input type="text" id="password">
</body>
</html>
原生Ajax和jQueryAjax使用
最新推荐文章于 2024-07-25 18:00:46 发布